Question

我正在玩ReactJS，我正在使用Gulp来连接我的文件。因为我无法轻易确定文件的顺序，也没有填充全局命名空间，所以我决定命名我的应用程序......例如。

App = App || {};

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

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

这似乎工作正常，但问题是React.render()必须在所有文件加载后。为了解决这个问题，我做了以下几点：

文件一：

App = App || {
    ready: function() {
        React.render(
            <App.Dashboard />,
            document.body
        );
    }
};

$(function() {
    App.ready();
});

其他档案：

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

这有效......但它感觉不正确。有没有更好的方法来解决这个问题？

Answer 1

你可以保持你的资产不变，并在最后一个简短的部分，当正文可用于写作时。

实际上有很多原因导致你不想渲染到document.body，所以我建议你在你的html中添加一个并使用它来渲染你的应用程序。这样，当你在<script>下有一个bootstrap <div>部分时，该容器应该在你想要呈现它的时候进行渲染：

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

丹·阿布拉莫夫（Dan Abramov）写了一些关于此的内容：https://medium.com/@dan_abramov/two-weird-tricks-that-fix-react-7cf9bbdef375#486f

我自己的经历与doc.body摸索：https://twitter.com/jusrin00/status/578331514397679617

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

1 个答案: