Question

背景

My React app目前包含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'));

Answer 2

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

class App extends React.component {

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

}

}

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

提取ReactDOM.render（）调用单独的文件

2 个答案: