堆栈内存溢出
  繁体   English   中英

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

[英]React Error: Target Container is not a DOM Element

 原文  2014-10-17 01:03:11  2   10    javascript/ django/ 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 元素。

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

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

10 个解决方案

解决方案1
 100 已采纳  2014-10-17 01:12:29

我想到了！

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

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

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

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

解决方案2
 38  2018-12-07 07:44:02

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

索引.html：

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

索引.js：

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

解决方案3
 11  2019-01-23 09:10:32

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

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

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

解决方案4
 9  2020-08-02 13:50:14

网络包解决方案

如果您在 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文件。

解决方案5
 7  2016-02-05 22:06:46

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

解决方案6
 7  2019-04-09 10:52:25

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

解决方案7
 2  2020-05-12 03:51:25

你也可以做这样的事情：

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

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

解决方案8
 2  2020-08-02 06:37:02

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

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

就在之前

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

它对我有用。

解决方案9
 1  2021-01-29 01:58:27

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

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

...

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

解决方案10
 0  2021-06-28 14:14:21

我在一个简单的项目中遇到相同错误的情况之一。 我希望该解决方案可以帮助某人。

下面的代码片段足以理解解决方案：

索引.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>

暂无
暂无

声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

相关问题 React - 未捕获的错误：目标容器不是 DOM 元素 React - 错误：目标容器不是 DOM 元素 react中的目标容器不是DOM元素 错误：目标容器不是 DOM 元素 react /react-redux 反应并使用 ReactDOM.createPortal() - 目标容器不是 DOM 元素错误 react-pdf - 错误：目标容器不是 DOM 元素 导入React组件时发生错误“目标容器不是DOM元素” React.js未捕获的错误：_registerComponent（…）：目标容器不是DOM元素 反应测试错误。 目标容器不是DOM元素 Meteor-React 错误：修复后目标容器不是 DOM 元素
相关标签
 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM