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

小编典典

反应错误：目标容器不是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元素。

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

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

阅读 229

2020-07-22

共1个答案

小编典典

我想到了！

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

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

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

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

2020-07-22