小编典典

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

reactjs

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

我看了一下这个子,但是对我的情况似乎没有帮助。

有人知道为什么我会收到该错误吗?


阅读 233

收藏
2020-07-22

共1个答案

小编典典

我想到了!

阅读此博客文章后,我意识到此行的位置:

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

错了。该行必须是该<body>部分的最后一行,就在</body>标记之前。将线下移即可解决问题。

我对此的解释是react在<head>标签之间而不是标签中寻找ID<body>。因此,它找不到contentID,因此它不是真正的DOM元素。

2020-07-22