我目前正在 React 中构建应用程序.js这应该是一个高级小部件。主要要求是应用程序应该仅在某个时间点有人执行函数时才初始化：
startApp({
someData: 'test',
wrap: 'domSelector'
});
我找到了这篇文章链接，作者声称你可以这样做：
<div id="MyApp"></div>
<script>
window.runReactApplication({
user: { name: 'BTM', email: 'example@example.com' }
}, document.querySelector('#MyApp'));
</script>
和索引.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>
我可以猜测在生产中这不是一个大问题，因为我可以先包含应用程序代码，然后包含脚本，因此我可以保证将函数添加到窗口中。
但是在开发环境中，这是一个我不知道如何解决的问题，并且在功能周围超时显然是疯狂的。有人有想法吗？
您可以使用动态导入而不是 setTimeout。
假设你所有的反应逻辑都捆绑在index.js中。只需执行以下操作即可确保在所需的 DOM 附件之前下载并运行index.js：
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'});