Javascript 反应错误：目标容器不是 DOM 元素
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/26416334/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
React Error: Target Container is not a DOM Element
提问by lnhubbell
I just got started using React so this is probably a very simple mistake, but here we go. My html code is very simple:
我刚开始使用 React，所以这可能是一个非常简单的错误，但我们开始吧。我的 html 代码非常简单：
<!-- base.html -->
<html>
<head>
<title>Note Cards</title>
<script src="http://fb.me/react-0.11.2.js"></script>
<!-- <script src="http://fb.me/JSXTransformer-0.11.2.js"></script> -->
<script src="http://code.jquery.com/jquery-1.10.0.min.js"></script>
{% load staticfiles %}
<link rel="stylesheet" type="text/css" href="{% static "css/style.css" %}">
<script src="{% static "build/react.js" %}"></script>
</head>
<body>
<h1 id="content">Note Cards</h1>
<div class="gotcha"></div>
</body>
</html>
Note that I am using django's load static files here. My javascript is a bit more complex, so I won't post it all here unless someone requests it, but the line with the error is this:
请注意，我在这里使用 django 的加载静态文件。我的 javascript 有点复杂，所以除非有人要求，否则我不会在这里发布所有内容，但错误行是这样的：
React.renderComponent(
CardBox({url: "/cards/?format=json", pollInterval: 2000}),
document.getElementById("content")
);
After which I get the 'target container is not a DOM element error' yet it seems that document.getElementById("content") is almost certainly a DOM element.
之后我得到“目标容器不是 DOM 元素错误”但似乎 document.getElementById("content") 几乎可以肯定是一个 DOM 元素。
I looked at thisstackoverflow post, but it didn't seem to help in my situation.
我查看了这个stackoverflow 帖子，但它似乎对我的情况没有帮助。
Anyone have any idea why I'd be getting that error?
任何人都知道为什么我会收到那个错误？
回答by lnhubbell
I figured it out!
我想到了！
After reading this blog postI realized that the placement of this line:
阅读这篇博文后，我意识到这一行的位置：
<script src="{% static "build/react.js" %}"></script>
was wrong. That line needs to be the last line in the <body>section, right before the </body>tag. Moving the line down solves the problem.
错了。该行必须是该<body>部分的最后一行，就在</body>标记之前。将线向下移动可以解决问题。
My explanation for this is that react was looking for the id in between the <head>tags, instead of in the <body>tags. Because of this it couldn't find the contentid, and thus it wasn't a real DOM element.
我对此的解释是，react 正在寻找<head>标签之间的 id ，而不是<body>标签。因此它找不到contentid，因此它不是一个真正的 DOM 元素。
回答by Alia
Also make sure idset in index.htmlis same as the one you referring to in index.js
还要确保在index.html 中设置的id与您在index.js 中引用的相同
index.html:
索引.html：
<body>
<div id="root"></div>
<script src="/bundle.js"></script>
</body>
index.js:
索引.js：
ReactDOM.render(<App/>,document.getElementById('root'));
回答by mikemols
Just to give an alternative solution, because it isn't mentioned.
只是提供一个替代解决方案，因为它没有被提及。
It's perfectly fine to use the HTML attribute deferhere. So when loading the DOM, a regular <script>will load when the DOM hits the script. But if we use defer, then the DOM andthe script will load in parallel. The cool thing is the script gets evaluated in the end - when the DOM has loaded (source).
defer在这里使用 HTML 属性完全没问题。因此，在加载 DOM 时，<script>当 DOM 命中脚本时，将加载常规。但是如果我们使用defer，那么 DOM和脚本将并行加载。很酷的事情是脚本最终会被评估 - 当 DOM 加载时（源）。
<script src="{% static "build/react.js" %}" defer></script>
回答by daniella
Also, the best practice of moving your <script></script>to the bottom of the html file fixes this too.
此外，将您的移动<script></script>到 html 文件底部的最佳实践也解决了这个问题。
回答by Binita Bharati
I had encountered the same error with React version 16. This error comes when the Javascript that tries to render the React component is included before the static parent dom element in the html. Fix is same as the accepted answer, i.e. the JavaScript should get included only after the static parent dom element has been defined in the html.
我在 React 版本 16 中遇到了同样的错误。当尝试呈现 React 组件的 Javascript 包含在 html 中的静态父 dom 元素之前时，就会出现此错误。修复与接受的答案相同，即只有在 html 中定义了静态父 dom 元素后，才应包含 JavaScript。
回答by A-312
Also you can do something like that:
你也可以做这样的事情：
document.addEventListener("DOMContentLoaded", function(event) {
React.renderComponent(
CardBox({url: "/cards/?format=json", pollInterval: 2000}),
document.getElementById("content")
);
})
The DOMContentLoadedevent fires when the initial HTML document has been completely loaded and parsed, without waiting for stylesheets, images, and subframes to finish loading.
在DOMContentLoaded事件触发时，最初的HTML文档已被完全加载和分析，而无需等待样式表，图片和完成加载子。
