反应错误：目标容器不是DOM元素 [英] React Error: Target Container is not a DOM Element
问题描述
我刚刚开始使用React，所以这可能是一个非常简单的错误，但是我们走了。我的html代码非常简单：
<！ - base.html - >
< html>
< head>
< title>注意卡< / 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 =stylesheettype =text / csshref ={％staticcss / style.css％}>
< script src ={％staticbuild / reactions.js％}>< / script>
< / head>
< body>
< h1 id =content>注意卡< / h1>
< div class =gotcha>< / div>
< / body>
< / html>
请注意，我在这里使用django的加载静态文件。我的javascript有点复杂，所以除非有人要求，否则我不会将其全部发布，但是错误的一行是这样的：
code> React.renderComponent（
CardBox（{url：/ cards /？format = json，pollInterval：2000}），
document.getElementById（content）
）;
之后我得到目标容器不是DOM元素错误，但似乎是这个文件。 getElementById（content）几乎肯定是一个DOM元素。
我看了一下这个 stackoverflow文章，但它似乎没有帮助我的情况。
<任何人都知道为什么会出现这个错误？
我想出来了！ b
$ b
阅读此博文后，我意识到这行的位置：
< script src ={％staticbuild / reactions.js％}> < /脚本>
是错误的。该行需要是< body> 部分中的最后一行，紧邻< / body> 标签。移动线解决问题。
我的解释是，反应是在< head> 标签之间寻找id在< body> 标签中。因此，它找不到内容 id，因此它不是一个真正的DOM元素。
I just got started using React so this is probably a very simple mistake, but here we go. My html code is very simple:
<!-- 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:
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.
I looked at this stackoverflow post, but it didn't seem to help in my situation.
Anyone have any idea why I'd be getting that error?
I figured it out!
After reading this blog post I 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.
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 content id, and thus it wasn't a real DOM element.
这篇关于反应错误：目标容器不是DOM元素的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
