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

Extracting ReactDOM.render() calls to separate file

背景

我的 React 应用目前包含 3 个 top-level 组件;一个 header、一个解释段落和应用程序本身,包装了一堆 child 组件。最后一部分很好,每个 child 组件都被提取到自己的文件中并导入。

现在,在我的 JavaScript 主文件中,我有这三个组件,然后在底部,我对每个组件都有一个 ReactDOM.render(...) 调用,这看起来有点凌乱,尤其是如果以后应该添加更多组件。

问题

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

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

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

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

只为 ReactDom.render

使用一个入口点
class App extends React.component {

render(){
       <div>
          <Header />
          <ParagraphExplanation />
      </div>

}

}

ReactDOM.render(<App />, document.getElementById('id'));