web-dev-qa-db-ja.com

不変違反：_registerComponent（...）：ターゲットコンテナはDOM要素ではありません

些細なReactの例のページを作成した後、このエラーが発生します。

捕捉されないエラー：不変の違反：_registerComponent（...）：ターゲットコンテナはDOM要素ではありません。

これが私のコードです：

/** @jsx React.DOM */
'use strict';

var React = require('react');

var App = React.createClass({
  render() {
    return <h1>Yo</h1>;
  }
});

React.renderComponent(<App />, document.body);

HTML：

<html>
<head>
  <script src="/bundle.js"></script>
</head>
<body>
</body>
</html>

これは何を意味するのでしょうか？

javascriptdomreactjs
351
Dan Abramov

document自体はscript内にあるため、スクリプトが実行される時点では、head要素はまだ使用できません。 scriptと_ head event でレンダリングする）にDOMContentLoadedを保持することは有効な解決策ですが、scriptをbodyの一番下に配置し、をルートコンポーネントの前にdivとするこのように： 

<html>
<head>
</head>
<body>
  <div id="root"></div>
  <script src="/bundle.js"></script>
</body>
</html>

そしてbundle.jsでは、以下を呼び出します。

React.render(<App />, document.getElementById('root'));

divではなく、常にネストされたbodyにレンダリングする必要があります。 そうでないと、Reactが予期しないときにあらゆる種類のサードパーティコード（Google Font Loader、ブラウザプラグインなど）がbody DOMノードを変更し、トレースやデバッグが非常に難しい奇妙なエラーを引き起こす可能性があります。 この問題についてもっと読む。

scriptを一番下に置くことのいいところは、Reactサーバーレンダリングをプロジェクトに追加した場合にスクリプトがロードされるまでレンダリングをブロックしないことです。

更新日：（2015年10月7日| v0.14 ）

React.renderは非推奨です。代わりにReactDOM.renderを使用してください。

例： 

import ReactDOM from 'react-dom';

ReactDOM.render(<App />, document.getElementById('root'));
584
Dan Abramov

/index.html

<!doctype html>
<html>
  <head>
    <title>My Application</title>
    <!-- load application bundle asynchronously -->
    <script async src="/app.js"></script>
    <style type="text/css">
      /* pre-rendered critical path CSS (see isomorphic-style-loader) */
    </style>
  </head>
  <body>
    <div id="app">
      <!-- pre-rendered markup of your JavaScript app (see isomorphic apps) -->
    </div>
  </body>
</html>

/app.js

import React from 'react';
import ReactDOM from 'react-dom';
import App from './components/App';

function run() {
  ReactDOM.render(<App />, document.getElementById('app'));
}

const loadedStates = ['complete', 'loaded', 'interactive'];

if (loadedStates.includes(document.readyState) && document.body) {
  run();
} else {
  window.addEventListener('DOMContentLoaded', run, false);
}

（IE9以降）

注 ：ヘッダーに<script async src="..."></script>を含めると、ブラウザは確実にJavaScriptバンドルのダウンロードを開始します 以前 HTMLコンテンツが読み込まれます。

出典： リアクトスターターキット 、 同型スタイルローダー

52
Konstantin Tarkus

ready関数 は次のように使うことができます。

$(document).ready(function () {
  React.render(<App />, document.body);
});

JQueryを使いたくない場合は、onload関数を使用できます。

<body onload="initReact()">...</body>
16
nils petersohn

単なる憶測ですが、index.htmlに以下を追加するのはどうでしょうか。

type="javascript"

このような：

<script type="javascript" src="public/bundle.js"> </script>

私にとってはうまくいった！ :-)

9
taquiles

私は同じエラーに遭遇しました。コードを以下から変更した後の単純なタイプミスが原因であることが判明しました。

document.getElementById('root')

に

document.querySelector('root')

欠けている '＃'に注目してください。

document.querySelector('#root')

万が一それが他の誰かがこのエラーを解決するのを助けるのを念頭に置いて投稿する。

4
mangakid

はい基本的にあなたがしたことは正しいですが、多くの場合JavaScriptが同期していることを忘れているので、DOMがロードされる前にコードを実行します。これを解決する方法：

1）DOMが完全にロードされているかどうかを確認し、必要な処理を行います。たとえば、DOMContentLoadedを聞くことができます。

<script>
  document.addEventListener("DOMContentLoaded", function(event) {
    console.log("DOM fully loaded and parsed");
  });
</script>

2）非常に一般的な方法は、document（bodyタグの後）の下部にscriptタグを追加することです。

<html>
  <head>
  </head>
  <body>
  </body>
  <script src="/bundle.js"></script>
</html>

3）window.onloadを使用します。これは、ページ全体が読み込まれたときに起動されます（imgなど）

window.addEventListener("load", function() {
  console.log("Everything is loaded");
});

4）document.onloadを使用します。これはDOMの準備ができたときに起動されます：

document.addEventListener("load", function() {
  console.log("DOM is ready");
});

DOMの準備ができているかどうかを確認するオプションはさらにありますが、短い答えはDO NOTDOMの準備ができていることを確認する前にスクリプトを実行することですすべての場合...

JavaScriptはDOM要素と連携して動作し、利用できない場合はnullを返し、アプリケーション全体を破壊する可能性があります...実行する前にJavaScriptを実行するには...

4
Alireza

私の場合、このエラーは新しいクラスの導入中にホットリロードが原因で発生しました。プロジェクトのその段階では、通常のウォッチャーを使用してコードをコンパイルしてください。

1
Micros

私は似たような/同じエラーメッセージに出くわしました。私の場合は、ReactJSコンポーネントを定義するためのターゲットDOMノードがありませんでした。 HTMLターゲットノードが他のHTML属性と共に適切な "id"または "name"で正しく定義されていることを確認します（あなたの設計ニーズに適しています）

1
anie codeskol

反応のレンダリングにwebpackを使用し、反応にHtmlWebpackPluginを使用する場合、このプラグインは空白のindex.htmlを単独で構築し、その中にjsファイルをインジェクトします。そして私のwebpack.config.jsで、このプラグインにそのアドレスを与えてください。

 plugins: [

        new HtmlWebpackPlugin({
            title: 'dev',
            template: 'dist/index.html'
        })
    ],

これが私のindex.htmlファイルです

<!DOCTYPE html>
<html lang="en">
<head>
    <link rel="shortcut icon" href="">
    <meta name="viewport" content="width=device-width">
    <title>Epos report</title>
</head>
<body>
<div id="app"></div>
<script src="./bundle.js"></script>
</body>
</html>
0
ghazaleh javaheri

基本的なHTML CSS jsを作成するだけで簡単ですjsからスクリプトをレンダリング

mport React from 'react';
import ReactDOM from 'react-dom';
import './index.css';

var destination = document.querySelector('#container');

   ReactDOM.render(
<div>
<p> hello world</p>
</div>, destination


        ); 
body{

    text-align: center;
    background-color: aqua;
  padding: 50px;
  border-color: aqua;
  font-family: sans-serif;
}
#container{
  display: flex;
  justify-content: flex;

}
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
   
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <meta name="theme-color" content="#000000" />
    <meta
      name="description"
      content="Web site created using create-react-app"
    />   
    <title> app  </title>
  </head>
  <body>
 

    <div id="container">
      
    </div>

  </body>
</html>
0
تقنيتي Taknity

index.htmlファイルでこれらのsrc domを使用し、jsファイルとリンクします。

0
LOVENEET SINGH

ReactJS.Netを使用していて、公開後にこのエラーが発生する方へ：

.jsxファイルのプロパティを確認し、Build ActionがContentに設定されていることを確認してください。 Noneに設定されたものは公開されません。私は this SO answer からこの解決策を見つけました。

0
Jecoms