Question

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

我查看了this stackoverflow帖子，但在我的情况下似乎没有帮助。

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

Answer 1

我明白了！

阅读this blog post后，我意识到这一行的位置：

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

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

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

Answer 2

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文件。

Answer 3

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

Answer 4

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

中引用的ID相同

index.html：

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

index.js：

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

Answer 5

您还可以执行以下操作：

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

在完全加载并解析了初始HTML文档而无需等待样式表，图像和子帧完成加载后，DOMContentLoaded事件就会触发。

Answer 6

我遇到了相同的错误，我使用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>

对我有用。

Answer 7

仅给出一个替代解决方案，因为未提及。

在此处使用HTML属性defer很好。因此，在加载DOM时，将在DOM命中脚本时加载常规<script>。但是，如果我们使用defer，则DOM 和脚本将并行加载。最酷的是，脚本最终在DOM（source）加载后得到评估。

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

Answer 8

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

Answer 9

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

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

...

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

Answer 10

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

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

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>

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

10 个答案: