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

IT技术 javascript django dom reactjs
2021-03-26 12:06:05

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

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

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

6个回答

我想到了！

阅读这篇博文后，我意识到这一行的位置：

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

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

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

@PaulO'Shannessy 啊，有道理！我也会这样做。
2021-06-04 12:06:05
或者（可能是个好主意）是将React.render调用包装在一个 onload/ready 侦听器中。然后将脚本标记放在哪里并不重要，因为节点将存在。
2021-06-12 12:06:05
您带有<head>标签的“我对此的解释”对我来说没有意义。更重要的是，React（js 文件）尝试初始化您的应用程序（具有 react id 的容器），但您的应用程序容器尚未呈现。所以把<script>..你的应用程序容器放在右边应该已经解决了问题，它在我的地方解决了它。对于这种情况，将所有 js 资源放在</body>.
2021-06-20 12:06:05

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

索引.html：

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

索引.js：

ReactDOM.render(<App/>,document.getElementById('root'));

网络包解决方案

如果您在 React 中使用 webpack 和 HMR 时遇到此错误。

您需要创建模板index.html并将其保存在src文件夹中：

<html>
    <body>
       <div id="root"></root>
    </body>
</html>

现在，当我们有模板时，id="root"我们需要告诉 webpack 生成 index.html 来镜像我们的index.html文件。

要做到这一点：

plugins: [
    new HtmlWebpackPlugin({
        title: "Application name",
        template: './src/index.html'
    })
],

template属性会告诉 webpack 如何构建index.html文件。

这对我今天帮助很大。谢谢！
2021-06-05 12:06:05

只是提供一个替代解决方案，因为它没有被提及。

defer在这里使用 HTML 属性完全没问题。因此，在加载 DOM 时，<script>当 DOM 命中脚本时，将加载常规。但是如果我们使用defer，那么 DOM和脚本将并行加载。很酷的事情是脚本最终会被评估 - 当 DOM 加载时（源）。

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

此外，将您移动<script></script>到 html 文件底部的最佳实践也解决了这个问题。

是的，使用 React 16.2，那是我的问题
2021-05-28 12:06:05
其它你可能感兴趣的问题
上一篇使用 React.forwardRef 与自定义 ref prop 的value 下一篇如何在渲染前获取react组件的大小（高度/宽度）？