当 React 尝试注册在 window.onload 或 window.addEventListener 中运行的组件时， DOM 尚未加载

Question

我在头 html 标签中有一个脚本标签。当 index.html 文件的其余部分已加载时，脚本应添加一个事件侦听器。因此，在此之前什么都不应该运行。除了浏览器读取 javascript 并导致一点渲染阻塞外，它几乎与在正文末尾添加脚本标签相同。

index.html

<html>
    <head>
        //meta stuff
        <script src="https://unpkg.com/babel-standalone@6/babel.min.js"></script>
        <script src="https://unpkg.com/react@15/dist/react.js"></script>
        <script src="https://unpkg.com/react-dom@15/dist/react-dom.js"></script>
        <script type="text/javascript" src="./code/webapp.js"></script>
    </head>
    <body>
        <noscript>Javascript is not enabled!</noscript>
        <div id="root"></div>
    </body>
</html>

这是我从 React 获得的控制台错误消息：

Uncaught Error: _registerComponent(...): Target container is not a DOM element.
    at invariant (react-dom.js:18118)
    at Object._renderNewRootComponent (react-dom.js:9978)
    at Object._renderSubtreeIntoContainer (react-dom.js:10069)
    at Object.render (react-dom.js:10090)
    at App (webapp.js:formatted:28)

奇怪的是函数 App() 在 window.onload 或 window.addEventListener('load') 期间被触发。我以前在我的个人网站上使用过它，但我在脚本标签上有延迟和异步，所以也许这就是它总是正确触发的原因。

webapp.js

...
function App() {
    console.log('App loading...');
    const reactroot = document.getElementById('root');
    var app = React.createElement(WebApp, null);
    ReactDOM.render( app, reactroot);
}
window.onload = App;

如果有人建议使用 document.ready()，我尽量不依赖 jQuery。我还想将其用于生产网站，而不仅仅是我的个人作品集。所以我不能依赖于添加 defer/async 到脚本标签。

当 React 尝试注册在 window.onload 或 window.addEventListener 中运行的组件时， DOM 尚未加载

DOM isn't loaded yet when React tries to registers Component which runs in window.onload or window.addEventListener with load

javascript

html

dom

deferred