“目标容器不是一个DOM元素”建设

我不断收到此错误与才反应过来：“目标容器不是一个DOM元素”建设

_registerComponent(...): Target container is not a DOM element.

我使用的是“创造 - 反应 - 应用”用长丝。有三个主要的代码文件。

这里的index.html的

<!DOCTYPE html> 
<html lang="en"> 
<head> 
    <meta charset="UTF-8"> 
    <title>Hello World</title> 
</head> 
<body> 
    <div id="hw"></div> 
</body> 
</html>

而且index.js：

import './index.css' 

import React from 'react' 
import {render} from 'react-dom' 

import Hello from './Hello' 

render(<Hello/>, document.querySelector('#hw'))

而且Hello.js

import './helloworld.css' 
import React, {Component} from 'react' 

class Hello extends Component { 
    render() { 
    return 
     <div className="HelloWorld-hello HelloWorld-flex"> 
     <h1>Hello</h1> 
     </div> 
    } 
} 

export default Hello

我用尽了一切我能想到的。所有文件都在同一个“src”目录中。这一切开始时，我试图用这个index.js内呈现两个部分组成：

render(
    <div> 
    <Hello/> 
    <World/> 
    </div>, 
document.querySelector('#hw'))

来源

2017-08-06 wondermaniac

如果使用'document.getElementById（'hw'）'而不是querySelector怎么办？ –

我也试过。这是错误信息的图片。 https://ibb.co/d6Xdzv – wondermaniac

你必须使用React.render（，document.getElementById（'hw'））。看看这里http://jsbin.com/gogibukeqi/1/edit?html,js,console,output –

我发现了问题，但我不明白为什么一个正在发生的事情。当然，只有当我在index.html中使用root作为div的名称时它才起作用。

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

而且index.js

import './index.css' 

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

import Hello from './Hello' 
import World from './World' 

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

在Hello.js文件，我放在DIV线的外侧return。一旦我移动div开始在那一行。

import './helloworld.css' 
import React, {Component} from 'react' 

class Hello extends Component { 
    render() { 
    return <div className="HelloWorld-hello HelloWorld-flex"> 
       <h1>Hello</h1> 
      </div> 
    } 
    } 

export default Hello

我想我明白我为什么会需要把<div>在同一行return，但我完全无能，为什么只有这个词root作品为DIV ID。我尝试了各种其他的词，并得到相同的错误。

最终，我试图在父组件（index.js）下嵌套两个独立的子组件（Hello.js和World.js）。

来源

2017-08-07 14:09:48 wondermaniac

“目标容器不是一个DOM元素”建设

回答

相关问题