反応アプリ内で、どのようにして要素（div）を動的に作成し、その中に反応アプリをレンダリングできますか？

Question

私はreact-reduxを使用してチャットアプリケーションを構築しています。このチャットアプリケーションは、一度に複数のやりとりを行い、ユーザーはそれらを切り替えることができます。

class Chat extends React.Component { 
render() { 
    return(
     //children components 
    ) 

    } 
} 
ReactDom.render(<Chat/>,document.getElementById('app')) 

私はアンケートフォームコンポーネントをアプリケーションの子コンポーネントとして持っています。 surveyフォームがiframe内にロードされ、フォームの内容がサーバーからロードされます。これらの内容は、さまざまな対話によって異なります。したがって、新しいインタラクションがユーザーに提供されるたびに、調査フォームコンポーネントを新しいフォームデータ（この場合はインタラクションごとに1つのiframeリスト）ですべて再描画します。

問題は、毎回最初のフォームの内容をレンダリングすることです。最初のフォームを埋めたとし、新しいインタラクションが起きたとき（状態変更：リストで再レンダリングする）、2つのフォームが初期サーバーから受信したコンテンツは、私が埋め込んだデータを失うことになります。

質問：この内容をどのように保持できますか？

解決策は、現在のフォームのコンテンツをredux-storeに格納し、キーをインタラクションとして使用し、iframeがアンロードされたときにそのインタラクションをレンダリングすることです。

新しいdivや要素を動的に（新しいインタラクションで）作成し、もう一度他のコンポーネントが再レンダリングされないようにsurveyformcomponent（単一のiframeを含む）をレンダリングすることができますか？したがって、以前にレンダリングされたiframeに影響を与えることなく、div内に新しいiframeがレンダリングされるようになります。

ありがとうございます！

Answer 1

親クラスのcomponentDidMountライフサイクルメソッドの中で、おそらく別のReactDOMレンダリングコールを実行します。ライフサイクルメソッドshouldComponentUpdateを使用して、再レンダリングをより詳細に制御することもできます。

shouldCompnentUpdate(nextProps, nextState) { 
    if (/*something changed and you need to rerender explicitly*/) { 
    return true; 
    } else { 
    return false; 
    } 
}