☰

不変違反: _registerComponent(...): ターゲット コンテナーは DOM 要素ではありません 質問する

tag-icon • tag-icon javascript dom reactjs
不変違反: _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>

これはどういう意味ですか？

ベストアンサー1

スクリプトが実行されるまで、document要素はまだ利用できません。要素script自体は にあるからです。と にhead保持しておくのは有効な解決策ですが、scriptheadDOMContentLoadedイベント時にレンダリングを の一番下に配置し、その前にルート コンポーネントをレンダリングすると、さらに効果的です。scriptbody 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、ブラウザ プラグインなど) がbodyDOM ノードを変更し、追跡やデバッグが非常に難しい奇妙なエラーが発生する可能性があります。この問題の詳細については、こちらをご覧ください。

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

更新: (2015 年 10 月 7 日 |v0.14）

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

例：

import ReactDOM from 'react-dom';

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

おすすめ記事