ReactJS

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 实际上有很多原因，所以我建议您将 a 放入 html 并使用它来渲染您的应用程序。这样，当您在 <div> 下有一个 bootstrap <script> 部分时，该容器应该在您要呈现给它的时候完成呈现：

<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 - 在加载时渲染顶级组件

ReactJS - Render top level component on load

javascript