提取 ReactDOM.render() 调用到单独的文件答案

【问题标题】：Extracting ReactDOM.render() calls to separate file提取 ReactDOM.render() 调用到单独的文件
【发布时间】：2016-07-16 00:34:53
【问题描述】：

背景

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

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

问题

根据今天的标准，是否应该将这些文件提取到自己的文件中，如果是，那么最好的（或至少一个好的）方法是什么？

【问题讨论】：

标签： javascript reactjs ecmascript-6 code-standards

【解决方案1】：

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

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

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

【讨论】：

【解决方案2】：

对 ReactDom.render 只使用一个入口点

class App extends React.component {

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

}

}

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

【讨论】：

啊，好吧，把所有东西都塞进一个大包装里？
绝对是的。您的 APP 组件是这里的包装器