[解決済み] React.render()をDOM内で複数回使ってもいいのか？

質問

Reactを使って、DOM上に複数回コンポーネントを追加したいのですが、どうすればよいですか？ このフィドル は、私がやりたいことを示し、何のエラーも投げていません。以下はそのコードです。

HTMLです。

<div id="container">
    <!-- This element's contents will be replaced with the first component. -->
</div>

<div id="second-container">
    <!-- This element's contents will be replaced with the second component. -->
</div>

JSです。

var Hello = React.createClass({
    render: function() {
        return <div>Hello {this.props.name}</div>;
    }
});

React.render(<Hello name="World" />, document.getElementById('container'));

React.render(<Hello name="Second World" />, document.getElementById('second-container'));

私が見たのは この質問 を見ると、上記のようにすることで、Reactコンポーネントが互いに干渉する危険性があるのではないかと心配になります。その質問への回答は、サーバーサイドレンダリングを使用することを示唆していますが、私はDjangoをサーバーサイドで使用しているので、私のためのオプションではありません。

一方、私がやっていることは、Reactライブラリのインスタンスを1つだけマウントしているので（複数のコンポーネントが独自のReactのインスタンスを呼び出すのとは対照的に）大丈夫なのかもしれませんね？

このように複数のDOMインスタンスを使用する方法は、Reactの使用方法として問題ないのでしょうか？

どのように解決するのですか？

はい。 React.render を同じページで複数回呼び出すことは全く問題ありません。あなたが提案したように、React ライブラリ自体は 1 回しか読み込まれませんが、各呼び出しで React.render を呼び出すたびに、他のどのコンポーネントからも独立した新しいコンポーネントインスタンスが作成されます。(実際、このような状況は React への移行過程にあるサイトでは珍しくなく、ページの一部の生成に React.render を使用して生成される部分とそうでない部分があります)。