ReactJS - その子の親状態の文脈を使用する

Question

私は少し問題があります。私は私の子供の小道具コールバックを使用して私の親の状態を設定したい。子コンポーネント

(...) 
switch(option.target.id) { 
      case 'facebook': 
       this.props.onOptionsChange({...this.state, 
       options:{...this.state.options, 
       facebook: option.target.checked}}) 
(...) 

(...) 
onOptionsChange(newState){ 
     this.setState(newState); 
    } 
render(){ 
    return (
     <Options onOptionsChange={(newState) => 
     this.onOptionsChange(newState)} /> 
     ) 
} 
} 
(...) 

親コンポーネント...しかし、最終的な文脈はいつも私の子コンテキストであるので、アプリのクラッシュ：状況はこのようになります。子供から親に文脈を移す可能性はありますか？乾杯

理想的

Answer 1

あなたが子供に渡すなり、その後、子供が小道具からそれを使用し、それがどんな変更を加えるしたい場合には、親状態

を更新する親コンポーネントでの状態を持っています

(...) 
constructor() { 
    super(); 
    this.state = { 
     data : {// some state, option : {//values here}, facebook: false} 
    } 
} 
... 
onOptionsChange(newState){ 
     this.setState({data: newState}); 
    } 
render(){ 
    return (
     <Options onOptionsChange={(newState) => 
     this.onOptionsChange(newState)} data = {this.state.data}/> 
     ) 
} 
} 
(...) 

ChildComponent

(...) 
switch(option.target.id) { 
      case 'facebook': 
       this.props.onOptionsChange({...this.props.data, 
       options:{...this.props.options, 
       facebook: option.target.checked}}) 
(...) 

に

のparentComponentのようにそれを試してみてください