我的 head html 标签中有一个 script 标签。当 index.html 文件的其余部分加载完毕后，脚本应添加一个事件监听器。因此，在此发生之前不应运行任何操作。除了浏览器读取 javascript 并导致一点渲染阻塞之外，它与在正文末尾添加 script 标记几乎相同。
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。
相关主题:
最佳答案
您应该使用DomContentLoaded事件而不是 onload 回调
document.addEventListener("DOMContentLoaded", function(event) {
console.log("DOM fully loaded and parsed");
});
检查this question有关 onload 与 DomContentLoaded 事件
关于javascript - 当 React 尝试使用 load 注册在 window.onload 或 window.addEventListener 中运行的组件时，DOM 尚未加载，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/46142783/