我刚开始使用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>
请注意,我在这里使用django的加载静态文件。我的JavaScript有点复杂,因此除非有人要求,否则我不会将其全部发布在这里,但是出现错误的行是这样的:
React.renderComponent( CardBox({url: "/cards/?format=json", pollInterval: 2000}), document.getElementById("content") );
之后,我得到“目标容器不是DOM元素错误”,但似乎document.getElementById(“content”)几乎可以肯定是DOM元素。
我看了一下这个子,但是对我的情况似乎没有帮助。
有人知道为什么我会收到该错误吗?
我想到了!
阅读此博客文章后,我意识到此行的位置:
<script src="{% static "build/react.js" %}"></script>
错了。该行必须是该<body>部分的最后一行,就在</body>标记之前。将线下移即可解决问题。
<body>
</body>
我对此的解释是react在<head>标签之间而不是标签中寻找ID<body>。因此,它找不到contentID,因此它不是真正的DOM元素。
<head>
content