ReactJS動的に子を置き換えます

Question

私は、それぞれが何をするかを変えることができる仕切りを使っていくつかの「ペイン」を持つ派手なUIを持っています。 To-doリストとシンプルなテキストエディタの2つのコンポーネントがあるとします。柔軟なUIを作成するために、各ペインにあるコンポーネントを変更できるようにしてください。たとえば、左側のペインをテキストエディタからTo-Doリストに変更することができます。私が親要素Paneを持っていると仮定して、どのように私はその子供の1つを別のものに置き換えることができますか？

<Pane> 
    <TextEditor /> /* I want to replace that with a <ToDoList /> when I press a button */ 
    <SomeOtherComponentOnTheRight /> 
</Pane> 

私は（this.state.currentChildrenなど）<Pane />の状態でReact.Children.toArray(this.props.children)を格納し、そこに要素を交換するが、何らかの理由で私は<Pane />で<TextEditor />のインデックスを取得する方法を見つけることができません試してみましたいくつかの理由でthis.props.childrenが子どもの小道具を保存していないので、私はそれを介してデータを送信することができないので、this.state.currentChildrenです。

私はこれを複雑にしてしまって申し訳ありませんが、コンポーネントの子を動的に変更する方法を知りたいだけです。

Answer 1

次のような表示されている内容を変更するためにあなたのJSXで状態を確認できます。他の場所で、あなたのコード内であなたがshowEditor」の状態を設定しますonClickイベントハンドラを呼び出すいくつかのボタンを持っているでしょう

<Pane> 
    { this.state.showEditor ? <TextEditor/> : <ToDoList /> } 
    <SomeOtherComponentOnTheRight /> 
</Pane> 

'をtrue/falseに変更します。その後、

Answer 2

あなたが変数に選択したコンポーネントを割り当て、その後、配列やオブジェクトで選択したコンポーネントを格納することができます（念のそれは大文字で始まり作る）成分としてそれを使用する：

const routes = { 
    a: TextEditor, 
    b: ToDoList 
}; 

const ChosenComponent = routes['a']; // select your component and store in variable 

return (
    <Pane> 
     <ChosenComponent /> 
     <SomeOtherComponentOnTheRight /> {/* render selected variable as component */} 
    </Pane> 
);