当React尝试注册带有load的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
问题描述
I have a script tag in the head html tag. 
我在头html标签中有一个脚本标签。 The script should add an event listener when the rest of the index.html file has loaded. 加载index.html文件的其余部分后，脚本应添加一个事件侦听器。 Therefore, nothing should run prior to that happening. 因此，在发生这种情况之前，不应执行任何操作。 It is almost the same as adding the script tag at the end of the body except for the browser reading the javascript and causing a little bit of render-blocking. 除了浏览器读取javascript并导致一点渲染阻塞外，它几乎与在正文末尾添加script标签相同。
index.html 的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>
Here is the console error message I get from React: 这是我从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)
The weird part is that the function App() get fired during a window.onload or window.addEventListener('load'). 怪异的部分是在window.onload或window.addEventListener（'load'）期间触发了App（）函数。 I used this before on my personal website but I had a defer and async on the script tag so maybe that is why it always fired correctly. 我以前在个人网站上使用过此脚本，但是在script标签上使用了defer和async，所以也许这就是为什么它总是正确触发的原因。
webapp.js 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;
In case anyone suggest using document.ready(), I am trying to not rely on jQuery. 万一有人建议使用document.ready（），我试图不依赖jQuery。 I want to also use this for a production website, not just my personal portfolio. 我还想将其用于生产网站，而不仅仅是我的个人作品集。 So I can't rely on adding defer/async to the script tag. 因此，我不能依赖于在脚本标签中添加defer / async。
Related topics: 相关话题：
1 个解决方案
解决方案1
1 已采纳 2017-09-10 16:16:20
You should use DomContentLoaded event instead of onload callback 您应该使用DomContentLoaded事件，而不是onload回调
document.addEventListener("DOMContentLoaded", function(event) {
console.log("DOM fully loaded and parsed");
});
Check this question for more information about onload vs DomContentLoaded event 检查此问题以获取有关onload vs DomContentLoaded事件的更多信息
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.