Question

运行此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 Uncaught Error：_registerComponent（...）：Target container不是DOM元素。（...）

Answer 1

显然你忘了在你的页面中添加元素，这是反应找不到容器的原因，为了避免这种问题，你必须创建一个带有标识符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>

Answer 2

看起来你忘了在你的html页面中定义这个id root，你的html页面应该包含这个id，把这行放在正文中，它会起作用：

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

您在错误的地方定义了id，请使用此部分：

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

Answer 3

试试这个：

在Html文件中：

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

在JS文件中：

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

Answer 4

一般来说，它应该是这样的 - ＆gt; ReactDOM.render(Component, Container)

document.querySelector（）应该指向index.html中的容器，就像评论中建议的Mayank一样。（document.querySelector('.container')）

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

Answer 5

将camelCase更改为document.querySelector('root')。

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

5 个答案: