javascript - 提取对单独文件的 ReactDOM.render() 调用

Question

背景

我的 React 应用目前包含 3 个顶级组件；标题、解释段落和应用程序本身，包装了一堆子组件。最后一部分没问题，每个子组件都被提取到自己的文件中并导入。

现在，在我的主要 JavaScript 文件中，我有这三个组件，然后在底部，我对每个组件都有一个 ReactDOM.render(...) 调用，这似乎是一个有点不整洁，特别是如果以后应该添加更多组件。

问题

根据今天的标准，这些文件是否应该提取到它们自己的文件中？如果是，最好的(或者至少是好的)方法是什么？

Answer 1

在这种情况下，您可以创建一个主要组件并包装其他三个组件，您的代码将如下所示

var App = React.createClass({
  render: function() {
    return <div>
      <Header />
      <Paragraph />
      <Explanation />
    </div>;
  }
});

ReactDOM.render(<App />, document.getElementById('put here your root id'));