反応ルータを使用しているときに、親コンポーネントの状態を子コンポーネントから設定するにはどうすればよいですか？

Question

私はReactプロジェクトに取り組んでいます。そこでは、一連の質問がユーザーに出され、その回答が保存されるオブジェクトとして結合されます。

親コンポーネントには複数の子が含まれています。

example--

<Route path="Parent" component={Parent}> 
 
    <Route path="Child1" component={Child1} /> 
 
    <Route path="Child2" component={Child2} /> 
 
    <Route path="Child3" component={Child3} /> 
 
    <IndexRoute component={Child1} /> 
 
</Route>

の親は、空の値 元の初期状態になります。 （this.state = {value1： ""、value2： ""}）

{this.props.childrenを使用すると、子から親（および親から子への小道具）にデータを渡すにはどうすればよいですか？ }？

Answer 1

component小道具を使用して子供のルートをレンダリングする代わりに、render小道具を使用してください。これにより、単にクラス自体を受け入れるのではなく、レンダリングするコンポーネントを関数が返すようにすることができます。それは次のようになります：

<Route path="Parent" component={Parent}> 
    <Route path="Child1" render={() => {<Child1 someProp={foo} />}} /> 
    <Route path="Child2" render={() => {<Child2 someProp={bar} />}} /> 
    <Route path="Child3" render={() => {<Child3 someProp={baz} />}} /> 
    <IndexRoute component={Child1} /> 
</Route> 

なぜこのようになりますか？さて、あなたが見ることができるように、レンダリングされた子（この例では、someProp）に小道具を渡すことができるようになりました。そして今、あなたは子供たちに小道具を渡すことができ、それはその子の背中からデータを取得する親のためにはuse callbacks to modify parent state from the children.

More info on the render prop here.

Answer 2

に簡単です、あなたはその子にプロパティとしてコールバック関数を渡す必要があります。

callbackFunction(data) { 
    // do something 
} 

<ChildComponent parentCallback={this.callbackFunction} /> 

その後、あなたはそれで何かをするコールバック関数を使用します。その親に戻ってデータを送信するために子コンポーネント内の小道具を使用することができます。

const x = ["a", "b", "c", "d"]; 
this.props.parentCallback(x); 

詳細については、以下の記事をチェックしてください：https://medium.com/@ruthmpardee/passing-data-between-react-components-103ad82ebd17

別のオプションは、Reduxのような状態のコンテナを使用することです。このシナリオでは、子コンポーネントは値を状態にディスパッチし、この状態は親によって聴取され、状態が変化すると再レンダリングされます。これは、より複雑なシナリオの解決策です。