只在调用html文件中的函数后才响应init app

Question

我目前正在React.js中构建应用程序，假设它是一个高级小部件。主要要求是应用程序只应在某个时间某人执行功能时初始化：

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

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

<div id="MyApp"></div>
<script>
    window.runReactApplication({
         user: { name: 'BTM', email: '[email protected]' }
    }, 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: '[email protected]' }
        }, document.querySelector('#MyApp'));
    }, 150);
</script>

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

但是在开发环境中它是一个我不知道如何解决的问题，并且在功能上超时显然是疯了。有人有想法吗？

Answer 1

您可以使用动态导入而不是setTimeout。

假设所有的反应逻辑都捆绑在index.js中。只需执行以下操作即可确保在所需的DOM附件之前下载并运行index.js：

import('index.js').then(() => {
   window.runReactApplication({
         user: { name: 'BTM', email: '[email protected]' }
   }, 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: [email protected]}, selector: 'domSelector'});