2017-07-26 30 views
0

私は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を使用すると、子から親(および親から子への小道具)にデータを渡すにはどうすればよいですか? }?

答えて

3

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.

+0

素晴らしいです。 'state'をまったく使用せず、実装を' Redux'のような 'StateManager'に移すことも考えてください。 – Hitmands

+0

リアクションルータv4ではこれが好ましい方法です。コンポーネントの代わりにレンダーを使用して、追加のマウントや再レンダリングを避けるようにしてください。 –

+0

私が探していたもの、ありがとう! –

1

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

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

関連する問題