首页 文章

反应错误：目标容器不是DOM元素

提问于
浏览 次
38

我刚开始使用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元素 .

我查看了this stackoverflow帖子，但它似乎对我的情况没有帮助 .

任何人都知道我为什么会收到这个错误？

javascript django dom reactjs

3 回答

  • 0

    还要确保index.html中设置的 id 与index.js中引用的相同

    index.html:

    <body> <div id="root"></div> <script src="/bundle.js"></script> </body>

    index.js:

    ReactDOM.render(<App/>,document.getElementById('root'));
    回复于
  • 3

    此外，将 <script></script> 移动到html文件底部的最佳做法也解决了这个问题 .

    回复于
  • 69

    我想到了！

    看完后this blog post我意识到这条线的位置：

    <script src="{% static "build/react.js" %}"></script>

    错了 . 该行必须是 <body> 部分中的最后一行，就在 </body> 标记之前 . 向下移动线解决了问题 .

    我对此的解释是，react正在寻找 <head> 标签之间的id，而不是 <body> 标签 . 因此，它无法找到 content id，因此它不是真正的DOM元素 .

    回复于

相关问题