未捕获的错误：_registerComponent(...)：目标容器不是 DOM 元素。(...)

Posted 2023-02-22

【中文标题】未捕获的错误：_registerComponent(...)：目标容器不是 DOM 元素。(...)

【英文标题】：Uncaught Error: _registerComponent(...): Target container is not a DOM element.(…)

【发布时间】：2017-06-10 09:34:30

【问题描述】：

我在运行这个 React 代码时遇到了这个错误：

import React from 'react';
import ReactDOM from 'react-dom';

ReactDOM.render(
  <div id="root">
  <h1>Hello, world!</h1></div>,
  document.querySelector('#root')
);

这是错误：

bundle.js:1194 未捕获的错误：_registerComponent(...): Target 容器不是 DOM 元素。(…)

【问题讨论】：

你在你的 html 页面中定义了这个 id 吗？？

cdn.rawgit.com/twbs/bootstrap/… " crossOrigin="anonymous"> 这是我的 index.html

【参考方案1】：

显然您忘记在页面中添加元素，这是 react 找不到容器的原因，为了避免这种问题，您必须创建一个带有标识符 root 的 div 元素，或者您必须更改选择器。

import React from 'react';
import ReactDOM from 'react-dom';

ReactDOM.render(
  <div id="root">
  <h1>Hello, world!</h1></div>,
  document.querySelector('body')
);

或

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

【参考方案2】：

你好像忘了在你的html页面中定义这个id root，你的html页面应该包含这个id，把这行放在body里面，它会起作用：

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

你在错误的地方定义了id，使用这部分：

ReactDOM.render(
  <div>
     <h1>Hello, world!</h1>
  </div>,
  document.querySelector('#root')
);

【参考方案3】：

试试这个：

在 Html 文件中：

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

在JS文件中：

ReactDOM.render(
    <div>
        <h1>Hello World!</h1>
    </div>,
    document.getElementById('root')
);

【参考方案4】：

一般来说应该是这样的 -> ReactDOM.render(Component, Container)

document.querySelector() 应该指向您 index.html 中的容器，正如 Mayank 在 cmets 中所建议的那样。 (document.querySelector('.container'))

请确保传递您创建的 react 组件，例如 ReactDOM.render(<App />, document.querySelector('.container')

【讨论】：

我有其他问题，我试试这个，但它给了我空白页面，没有任何错误 import React, Component from 'react';从“react-http-request”导入请求； export default class App extends Component render() return ( (error, result, loading) => if (loading) return loading...; else return JSON.stringify(result) ; );

你有没有使用 ReactDOM.render() 将你的 App 组件导入到 js 文件中？

【参考方案5】：

将document.querySelector('root') 更改为document.getElementById("#root")。