反応jsのビュー間でデータを渡す方法

Question

私は2つのビューを持っています。 1つはアイテムのリストを持つ左側のナビゲーションで、もう1つは選択したアイテムに応じて変更する必要があるメインスクリーンです。ここ

は、私は、「名前」を変更するトグル機能は、私が更新しようとしているある

（左ナビゲーションのプロジェクトの一つのthats）顕著な名前に出て慰め

onToggleFilter(checked) { 
    let d = this.props.data 
    this.setProjectName(d.id) 
    //console.log("name" + d.id) 
    d.onFilter = checked 
    if(d.children && d.children.length > 0) { 
     d.children.forEach(item => { 
      item.onFilter = checked 
     }) 
    } 
    this.setState({ selected: checked }) 
    if(this.props.onFilterChanged) { 
     this.props.onFilterChanged(checked)  
    } 
} 

setProjectName (data){ 
    console.log ("name" + data) 
    let projectName = data 

} 

どういうわけか、私はそのprojectNameを別のコンポーネントに渡す必要があります。私は反応が新しく、私は何かシンプルだと確信していますが、ドキュメントを読んでからはちょっと立ち往生しています。

OK私は、私は最初の部分を行う方法を知っていると思う：

私はこれは、内の他の場所で設定されている項目の配列に拾って、この機能を持っているデータサービスファイル

getNavInfo(){ 


     _instance.navData = navArray 

     console.log ("instance hit"+ navArray) 

    } 

を持っていますここでは、ファイル

は、他のコンポーネント

getDataNav() 

    { 
     let d = this.dataService.getNavInfo() 
     console.log ("d here" + d) 
    } 

の呼び出しです

データサービスはもう1つのコンポーネントです。

私はこのかかわらずに行う

これが定義されていないことを私に言って

this.dataService.getNavInfo().then(this.getDataNav) 

getDataNav (data) 

    { 
      console.log ("d here" + data); 
    } 

その -

this.dataService.getNavInfo().then(this.getDataNav) 

Answer 1

が好きで、あなたのIDか何かでプロジェクト名を置き換えオクラホマので、ここで私はそれをやった方法です。念のために、状態をより正確に追跡して管理するためにはreduxのようなものを使う必要があることを覚えておいてください。左のナビゲーションで誰かがプロジェクトをクリックしたときにデータを更新する方法が必要でした。誰かがプロジェクトをクリックするイベントコール -

this.dataService.newProjectSelected(d.id) 

これは私が更新しようとしているビューにコンストラクタからである -

this.dataService.subscribeToProjectUpdate(this.newDataReceived.bind(this)) 
newDataReceived(projectId) { 
    console.log(projectId) 
    if(!projectId) { 
     return 
    } 

これらのデータに表示を取る関数の呼び出しですデータ -

this.dataService.defect(projectId).then(this.processDataDefect) 
    this.dataService.demand(projectId).then(this.processDataDemand) 
    this.dataService.effort(projectId).then(this.processDataEffort) 
    this.dataService.chartLegend(projectId).then(this.proccessDataLegend) 
    this.dataService.projectname(projectId).then(this.proccessDataProjectName) 
} 

これらは、実際のAPI呼び出しを行うデータサービスファイルにある -

newProjectSelected(projectId) { 
     this.projectCallbacks.map(callback => callback(projectId)) 
    } 

    subscribeToProjectUpdate(callback) { 
     if(!this.projectCallbacks) { 
      this.projectCallbacks = new Array() 
     } 

     // Todo make sure we only add it once 
     this.projectCallbacks.push(callback) 
    } 

私はその少しハック知っているが、それは我々が持っているものとは「私は今、何かを必要とする」タイプの一つでしたすべてが出くわす。

Answer 2

あなたはLeftNavの親、およびMainScreenコンポーネントとしてApp.jsを持つことができます。親の状態を小道具として子どもに伝える。

<App> 
    <LeftNav selected={this.state.projectName} handleToggle={ //... when item been clicked, change projectName in state of App }> 
    <MainScreen projectName={this.state.projectName}> 
</App> 

...あなたは