背景
我的 React 应用目前由 3 个顶级组件组成;一个标题、一个解释段落和应用程序本身,包装了一堆子组件。最后一部分很好,每个子组件都被提取到自己的文件中并导入。
现在,在我的主 JavaScript 文件中,我有这三个组件,然后在底部,我ReactDOM.render(...)
对它们中的每一个都有一个调用,这似乎有点不整洁,尤其是如果以后应该添加更多组件的话。
问题
根据今天的标准,是否应该将这些提取到他们自己的文件中,如果是这样,最好的(或至少是好的)方法是什么?
背景
我的 React 应用目前由 3 个顶级组件组成;一个标题、一个解释段落和应用程序本身,包装了一堆子组件。最后一部分很好,每个子组件都被提取到自己的文件中并导入。
现在,在我的主 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'));