Javascript ReactJS-加载时渲染顶级组件

我正在玩弄ReactJS，我正在使用Gulp连接我的文件。因为我无法轻松确定文件的顺序，并且为了不填充全局名称空间，我决定为我的应用程序命名名称空间。。。e、 g

App = App || {};

App.Dashboard = React.createClass({
    render: function() {
        return (
            <p>My Dashboard</p>
        );
    }
});

React.render(
    <App.Dashboard />,
    document.body
);

其他文件：

App.Dashboard = React.createClass({
    render: function() {
        return (
            <p>My Dashboard</p>
        );
    }
});

App.Dashboard=React.createClass({
render:function（）{
返回(
我的仪表盘

);
}
});

---

这很有效。。。但是感觉不太对。有更好的方法吗？

你可以保持你的资产不变，并在末尾有一个简短的部分，在正文可供写作时运行

实际上有很多原因不想呈现到document.body，所以我建议您在html中添加一个，并使用它来呈现应用程序。这样，当您在

下有一个引导

部分时，该容器应该在您要渲染到它的时候完成渲染：

<div id="app"></div>
<script>
App.ready(); // calls the function which then does   
             // React.render(Component, document.getElementById('app'))
</script>

App.ready（）；//调用函数，然后执行
//React.render（组件，document.getElementById（'app'））

丹·阿布拉莫夫（Dan Abramov）写了一些关于这一点的文章：

---

我自己在doc.body中摸索的经验：

如果你不能控制文件的浓缩顺序，你应该切换到一个构建系统，该系统将根据

require

使用情况对它们进行正确排序。比如说。或使用这两种方法都应该意味着您可以更自然地编写

渲染

函数。gulp不会这样做吗？如果这是我最近涉猎过的案例，我会感到惊讶，但没有深入探讨。这是有道理的，谢谢。现在我将坚持这种方法！

<div id="app"></div>
<script>
App.ready(); // calls the function which then does   
             // React.render(Component, document.getElementById('app'))
</script>