は私が反応して、このエラーを取得しておく

を構築する前に、「ターゲットコンテナは、DOM要素ではありません」。コードの3つのメインファイルがあります。は私が反応して、このエラーを取得しておく

ここで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"ディレクトリにあります。

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

出典

2017-08-06 wondermaniac

querySelectorの代わりに 'document.getElementById（ 'hw'）'を使用するとどうなりますか？ –

私もそれを試しました。ここにエラーメッセージの写真があります。 https://ibb.co/d6Xdzv – wondermaniac

React.render（、document.getElementById（ 'hw'））を使用する必要があります。ここを見てみましょう私はReact.renderを行うと、私はこのエラーに 'TypeError例外を取得 –

1が起こっている理由を私は理解していないが、私は、問題が見つかりました：私はこれを使用してindex.js内の二つの成分をレンダリングしようとしていたとき、これは、すべてを開始しました。確かに、index.htmlのdivの名前としてrootを使用した場合にのみ動作します。 Hello.jsファイルで

<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'))

、私はreturnとラインの外にdiv要素を配置。一度私は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

は私がreturnと同じ行に<div>を配置する必要があるだろう、なぜ私が理解思うが、私は約完全に無知だ理由だけで単語のdiv idのroot作品。私は、あらゆる種類の他の単語を試してみて、同じエラーになります。

最終的に、親コンポーネント（index.js）の下に2つの別個の子コンポーネント（Hello.jsとWorld.js）がネストされていました。

出典

2017-08-07 14:09:48 wondermaniac

は私が反応して、このエラーを取得しておく

答えて

関連する問題