Question

我目前正在React.js中构建应该是高级小部件的应用程序。主要要求是应用程序仅应在某人将要执行功能的某个时间点时进行初始化：

startApp({
    someData: 'test',
    wrap: 'domSelector'
});

我发现了这篇文章Link，作者声称您可以这样做：

<div id="MyApp"></div>
<script>
    window.runReactApplication({
         user: { name: 'BTM', email: 'example@example.com' }
    }, document.querySelector('#MyApp'));
</script>

和index.js

function runApplication(data, node) {
    ReactDOM.render(<App data={data} />, node);
}
window.runReactApplication = runApplication;

它对我不起作用，因为我得到runReactApplication是未定义的错误。出于好奇，我尝试将执行timeout周围包装起来，并且成功了：

<script>
    setTimeout(function() {
        window.runReactApplication({
            user: { name: 'BTM', email: 'example@example.com' }
        }, document.querySelector('#MyApp'));
    }, 150);
</script>

我可以猜测在生产中这不是什么大问题，因为我可以先包含应用程序代码，然后再包含脚本，因此我可以保证将功能添加到窗口中。

但是在开发环境中，这是我不知道如何解决的问题，并且围绕功能超时显然很疯狂。有人有主意吗？

Answer 1

您可以使用动态导入代替setTimeout。

比方说，您所有的反应逻辑都捆绑在index.js内部。只需执行以下操作，以确保index.js已下载并在所需的DOM附件之前运行：

import('index.js').then(() => {
   window.runReactApplication({
         user: { name: 'BTM', email: 'example@example.com' }
   }, document.querySelector('#MyApp'));
}

如果要预加载index.js文件以达到最佳速度，只需添加

<script src="index.js"></script>

到您的index.html文件的开头。

但是，从广义上讲，我不确定为什么您的startApp函数不会简单地是：

function startApp(params){
    const {data, selector} = params;
    ReactDOM.render({
         <App data={data} />
    }, document.querySelector(selector));
}

您可以将其作为回调绑定到所需的任何html事件（即，onClick用于按钮，onLoad用于文档加载，等等）。

 button.onclick = startApp({data:{email: me@test.com}, selector: 'domSelector'});

仅在调用html文件中的函数后才对init应用程序做出反应

1 个答案: