javascript - react 错误 : Target Container is not a DOM Element

标签 javascript django dom reactjs

我刚开始使用 React,所以这可能是一个非常简单的错误,但我们开始吧。我的 html 代码非常简单:

<!-- base.html -->
<html>
  <head>
    <title>Note Cards</title>
    <script src="http://<url>/react-0.11.2.js"></script>
<!--     <script src="http://<url>/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 帖子,但它似乎对我的情况没有帮助。

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

最佳答案

我想通了!

看完this blog post我意识到这一行的位置:

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

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

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

关于javascript - react 错误 : Target Container is not a DOM Element,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/26416334/

相关文章:

javascript - AHK GUI DateTime 默认设置

python - CommandError: Elasticsearch 中未命名任何模型或应用

django - 在保存内联表单集之前对其进行修改

javascript - 使用 JavaScript 更新 anchor

java - Android 中的 XML 解析问题

javascript - HighStocks 可拖动元素干扰 gridster 拖动

javascript - 使用 jQuery 使用其他元素的文本选择类

javascript - 如何进行过滤器以便将包含 null 属性的结果放在最后?

使用 get_queryset 的 Django ListView 分页

Javascript Alertify 等待确认然后转到另一个页面