React: componentDidMountの要素を一度に再レンダリングしますエラー：nullのプロパティ 'rootID'を読み取ることができません。
componentDidMount関数でReactDOM.render＃container element（top-level）を実行します。Reactはエラーを表示します。nullのプロパティ 'rootID'を読み取れません。
setTimeout run ReactDOM.renderを使用すると、機能します。 （0ms後でも）
不安を感じますが、誰か助けてもらえますか？
html：
<!DOCTYPE html>
<html>
<head>
<title>React</title>
</head>
<body>
<div id="container"></div>
<script type="text/javascript" src="script/lib/react.js"></script>
<script type="text/javascript" src="script/lib/react-dom.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/babel-core/5.8.23/browser.min.js"></script>
<script type="text/javascript" src="script/bundle.js"></script>
</body>
</html>
A.jsx＆B.jsx：
var A = React.createClass({
componentDidMount: function(){
ReactDOM.render(
<B />,
document.getElementById('container')
);
},
render: function(){
return (
<div>Hello World, I'm A.</div>
)
}
});
var B = React.createClass({
render: function(){
return (
<div>Hello World, I'm B.</div>
)
}
});
app.jsx：
ReactDOM.render(
<A />,
document.getElementById('container')
);
h1orz
全てのコメント3件
jsfiddleで問題を再現できますか？ https://jsfiddle.net/L3zn8dws/
cpb
2016年06月01日
本当の問題は、なぜライフサイクルメソッド内からReactDOM.renderを呼び出すのかということです。 現在のコンポーネントがマウントされているノードに新しいコンポーネントをマウントしようとしていますが、これはアンチパターンのようです。
ルートで再マウントするのではなく、ルートの親コンポーネントを使用して、レンダリングするコンポーネントを管理する必要があります。 どうしても複数のReactルートが必要な場合（これには本当に正当な理由があるはずです）、これを管理する何らかのヘルパーシステムを使用する必要があります。
https://facebook.github.io/react/blog/2015/10/01/react-render-and-top-level-api.html#helpers
複数のReactルートがある場合、または時間の経過とともに削除される単一のルートがある場合は、常に独自のラッパーAPIを作成することをお勧めします。 これらはすべて、外部システムがどのように見えるかによってわずかに異なります。 たとえば、Facebookには、ページ遷移ルーターに自動的に接続してunmountComponentAtNodeを自動的に呼び出すシステムがあります。
どこでもReactDOM.render（）を直接呼び出すのではなく、アプリケーション内でのマウントとアンマウントを管理するライブラリを作成/使用することを検討してください。
aweary
2016年06月01日
これはサポートされていないパターンのようです。ライフサイクルが現在実行されている別のコンポーネントがすでに含まれているコンテナに何かをレンダリングしようとしています。
Bを表示する場合は、 A <B />を含めます。
gaearon
2016年10月27日
関連する問題
varghesep
·
3コメント
jimfb
·
3コメント
jvorcak
·
3コメント
UnbearableBear
·
3コメント
tleunen
·
3コメント
最も参考になるコメント
本当の問題は、なぜライフサイクルメソッド内から
ReactDOM.renderを呼び出すのかということです。 現在のコンポーネントがマウントされているノードに新しいコンポーネントをマウントしようとしていますが、これはアンチパターンのようです。ルートで再マウントするのではなく、ルートの親コンポーネントを使用して、レンダリングするコンポーネントを管理する必要があります。 どうしても複数のReactルートが必要な場合（これには本当に正当な理由があるはずです）、これを管理する何らかのヘルパーシステムを使用する必要があります。
https://facebook.github.io/react/blog/2015/10/01/react-render-and-top-level-api.html#helpers
どこでもReactDOM.render（）を直接呼び出すのではなく、アプリケーション内でのマウントとアンマウントを管理するライブラリを作成/使用することを検討してください。