Q&A
#やりたいこと
画面にHello!World!を表示したい
#実行コード
webpackでreactをバンドルして動かすテスト中にエラーが起きました
main.jsでHello.jsのなかで定義されたコンポーネントを使おうとしています。
javascript
1import React from 'react' 2import ReactDOM from 'react-dom' 3import {Hello} from './Hello' 4import {World} from './Hello' 5 6ReactDOM.render( 7 <Hello />, 8 <World />, 9 document.getElementById('root'))
Hello.jsはこのようになっており、HelloとWorldのクラスを定義しています。
javascript
1import React from 'react' 2export class Hello extends React.Component { 3 render () { 4 return <h1>Hello!</h1> 5 } 6} 7 8export class World extends React.Component { 9 render () { 10 return <h1>World!</h1> 11 } 12}
webback.config.jsの中ではこのように指定しています
javascript
1const path = require('path') 2//returns '/Users/shotaro_okamoto/ProperDocs/programing/React_practice/release' 3// '__dirname' means the directory to which this file belongs 4module.exports = { 5 entry: { 6 filename: path.resolve(__dirname,'./src/main.js') 7 }, 8 output: { 9 path: path.resolve(__dirname,'./out'), 10 filename: 'bundle.js' 11 }, 12 module: { 13 rules: [ 14 { 15 test: /.js$/, 16 loader: 'babel-loader', 17 query: { 18 presets: ['@babel/preset-env','@babel/react'] 19 } 20 } 21 ] 22 } 23}
main.htmlの中でバンドルされたファイルを読み込み描画します。
html
1<!DOCTYPE html> 2<html lang="en"> 3<head> 4 <meta charset="UTF-8"> 5 <title>Document</title> 6</head> 7<body> 8 <div id="root"> 9 </div> 10 <script src="out/bundle.js"></script> 11</body> 12</html>
#発生している問題
Uncaught Error: Minified React error #200がgoogle chrome上で発生します。
Target container is not a DOM element.とリンク先に書かれており、うまくDOM要素を作れていないようなのですが、初心者ゆえ何が悪いのかわかりません。
Helloクラスをインポートするだけのときは普通にHello!が表示されるのですが、Worldクラスを追加するとエラーが起こります。
どうにかなりませんか？
回答1件
0
ベストアンサー
ReactDOM.renderは、1つの仮想DOMエレメントしか引数に取れません（React公式）。ReactDOM.render(<Hello />, <World />としてしまうと、<World />をルートとして解釈しようとするのでエラーとなってしまいます。
jabascript
1ReactDOM.render( 2 <> 3 <Hello /> 4 <World /> 5 </>, 6 document.getElementById('root') 7)
このように、2つをフラグメントで束ねて1つの仮想DOMエレメントにしてください。
投稿2019/12/27 05:04
総合スコア145975
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。