React 错误：目标容器不是 DOM 元素答案

【问题标题】：React Error: Target Container is not a DOM ElementReact 错误：目标容器不是 DOM 元素
【发布时间】：2014-12-12 12:35:11
【问题描述】：

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

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

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

【问题讨论】：

有谁因为这个错误而被 Meteor Tutorial 卡住了？这是解决方案stackoverflow.com/a/51007095/4777670

标签： javascript django dom reactjs

【解决方案1】：

目标容器不是 DOM 元素。

我也用一个简单的入门应用程序遇到了这个错误。

// index.js

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

解决方案：

语法错误可能导致此错误。 我检查了我的语法并正确包装了我的<App />。

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

【讨论】：

【解决方案2】：

其中一个案例是我在一个简单的项目中遇到了同样的错误。我希望该解决方案对某人有所帮助。

以下代码sn-ps足以理解解决方案：

index.html

  <body>
    <noscript>You need to enable JavaScript to run this app.</noscript>
    <div id="root"></div>
  </body>

someFile.js ：注意下面的 const portalElement = document.getElementById("overlays"); 行：

const portalElement = document.getElementById("overlays");

const Modal = (props) => {
  return (
    <Fragment>
            {ReactDOM.createPortal(<Backdrop />, portalElement)}
            
      {ReactDOM.createPortal(
        <ModalOverlay>{props.children}</ModalOverlay>,
        portalElement
      )}
          
    </Fragment>
  );
};

我的 index.html 文件中没有任何 id = "overlays" 的元素，所以上面突出显示的行输出了 null，因此 React 无法找到它应该在哪个元素中创建门户即{ReactDOM.createPortal(<Backdrop />, portalElement)}所以我得到了以下错误

我在 index.html 文件中添加了 div，错误消失了。

 <body>
    <noscript>You need to enable JavaScript to run this app.</noscript>
    <div id="overlays"></div>
    <div id="root"></div>
  </body>

【讨论】：

【解决方案3】：

对于那些在网站的某些部分实现了 react js 并遇到此问题的人。只需在渲染 react 组件之前添加一个条件来检查该页面上是否存在该元素。

<div id="element"></div>

...

const someElement = document.getElementById("element")
    
if(someElement) {
  ReactDOM.render(<Yourcomponent />, someElement)
}

【讨论】：

当 Drupal 行为被多次调用并且 context 变量不包含根元素时，可能会出现这种情况。

【解决方案4】：

webpack 解决方案

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

您需要创建模板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 文件。

【讨论】：

今天这对我帮助很大。谢谢！

【解决方案5】：

我遇到了同样的错误，我使用 create-react-app 创建了应用程序，但在 /public/index.html 中还添加了matrialize 脚本，但与“root”有连接，所以我添加了

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

就在之前

<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/js/ materialize.min.js"></script>

它对我有用。

【讨论】：

这是我的问题。我不小心从 index.html 中删除了根目录。重新添加解决了问题。

【解决方案6】：

你也可以这样做：

document.addEventListener("DOMContentLoaded", function(event) {
  React.renderComponent(
    CardBox({url: "/cards/?format=json", pollInterval: 2000}),
    document.getElementById("content")
  );
})

DOMContentLoaded 事件在初始 HTML 文档完全加载和解析后触发，无需等待样式表、图像和子框架完成加载。

【讨论】：

【解决方案7】：

还要确保 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'));

【讨论】：

【解决方案8】：

我在使用 React 版本 16 时遇到了同样的错误。当尝试呈现 React 组件的 Javascript 包含在 html 中的静态父 dom 元素之前时，就会出现此错误。修复与接受的答案相同，即仅在 html 中定义静态父 dom 元素后才应包含 JavaScript。

【讨论】：

【解决方案9】：

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

在这里使用 HTML 属性 defer 非常好。因此，在加载 DOM 时，当 DOM 命中脚本时，将加载常规的 <script>。但是如果我们使用defer，那么DOM 和脚本将并行加载。很酷的事情是脚本最终被评估 - 当 DOM 加载时 (source)。

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

【讨论】：

【解决方案10】：

我想通了！

看了this blog post后才意识到这一行的放置：

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

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

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

【讨论】：

另一种选择（可能是一个好主意）是将 React.render 调用包装在 onload/ready 侦听器中。那么你把脚本标签放在哪里都没有关系，因为节点会存在。
@PaulO'Shannessy 啊哈，这很有道理！我也会这样做。
带有<head> 标签的“我对此的解释”对我来说没有意义。更多的是 React（js 文件）尝试初始化您的应用程序（具有反应 id 的容器），但您的应用程序容器尚未呈现。因此，将<script>.. 放在您的应用容器之后应该已经解决了问题，它在我的位置解决了它。对于这种情况，将所有 js 资源放在 </body> 之前唯一的最佳实践。

【解决方案11】：

此外，将<script></script> 移动到 html 文件底部的最佳做法也可以解决此问题。

【讨论】：

是的，使用 React 16.2，这是我的问题