が反応 - グランド親コンポーネント上の構造として

Question

にデータを渡す、私はグランド・グランド・グランド親コンポーネントである「左コンポーネント」にいくつかの州を渡したいと思います。

var grandChildRight = React.createClass({ 
     clicksomething : function() { 
     this.setState({data:'you clicked me'}); 
     } 
}); 

var leftComponent : React.createClass({ 
    render : function() { 
     {this.props.data} 
    }; 
}); 

HTML 
<div class="left"> 
<leftComponent data="?" /> 
</div> 
<div class="right"> 
<rightComponent> 
    <anotherComponent> 
     <grandChildRight /> 
    </anotherComponent> 
</rightCompoent> 
</div> 

「Flux」または「Redux」を使用せずにこれを行う方法はありますか。 私を助けてください。

ありがとうございました。

Answer 1

あなたは、その状態の更新時にコールするためgrandChildRightにあなたのHTMLをラップコンテナを追加し、コールバック小道具を追加してみてください：grandChildRightコンポーネントのonUpdateにthis.onRightGrandChildUpdateを渡すとき

var grandChildRight = React.createClass({ 
    clicksomething: function() { 
     this.props.onUpdate({data:'you clicked me'}); 
    } 
}); 

var leftComponent = React.createClass({ 
    render : function() { 
     {this.props.data} 
    }; 
}); 

var container = React.createClass({ 
    onRightGrandChildUpdate: function(newState) { 
     this.setState(newState); 
    }, 

    render: function() { 
     return (<div className="container"> 
      <div className="left"> 
      <leftComponent data={this.state.data} /> 
      </div> 
      <div className="right"> 
      <rightComponent> 
       <anotherComponent> 
       <grandChildRight onUpdate={this.onRightGrandChildUpdate.bind(this)} /> 
       </anotherComponent> 
      </rightCompoent> 
      </div> 
     </div>); 
    } 
}); 

は（.bind(this)に注意してください。そうthisを保証し実行すると、コンテナコンポーネントに結合し、いない現在のグローバルオブジェクト）

を次に、あなたの「HTML」は次のようになります。

<container /> 

本質的には、あなたが興味を持っているdataを右の孫と左のコンポーネントの両方より上のレベルに持ち上げます。提供されたonUpdateプロパティは、右の孫がコンテナの状態を更新することを可能にし、その後、左のコンポーネントに渡されたdataに影響します。 警告：

Answer 2

は、私が問題以下が午前変更

var Parent = React.createClass({ 
    handleEventChange : function(event){ 
     this.setState({data:event.data}) 
    }, 
    render : function() { 
     <LeftComponent data={this.state.data}/> 
     <RightComponent onEventChange={this.handleEventChange}/> 

    }; 
}); 

var LeftComponent = React.createClass({ 
    render : function() { 
     <div>{this.props.data}</div> 
    }; 
}); 

var RightComponent = React.createClass({ 
    render : function() { 
     <GrandChildRightComponent onChildChange={this.handleChildEvent}/> 
    }; 
    handleChildEvent : function (event) { 
     this.props.onEventChange({data: event.data}) 
    }; 

}); 

var GrandChildRightComponent = React.createClass({ 
     clicksomething : function() { 
     this.props.onChildChange({data:'Grand child is clicked'}) 
     } 
});