改變不直接處理事件ReactJs

Question

爲了更好地理解我的問題組件的狀態，看看我的組件圖：https://app.box.com/s/rkq9bhyzs00971x6xgpq8exmvu4zzjlt

通過查看圖像，你可以看到我基本上是有一個組件結構

Browse Widget 
    -Main Menu 
    -Display 
    -SubMenu 
     -SubCategory 
     -SearchBar 
    -Video Display 

我的顯示組件包含從API中提取的所有組件。但是他們依賴於瞭解MainMenu組件具有活動的選項卡以進行正確的查詢。每次點擊一個Tab時，我想更新Display的狀態（使用來自API的新調用）。這可能嗎？

我對於如何改變組件上的狀態並不直接處理事件本身有點遺憾？

我需要改變我的組件結構，或者是否有更好的方法來做到這一點？您可以指向/製作的任何示例？

Answer 1

我建議跟蹤活動選項卡並管理DisplayController組件中的所有API調用。使用下面的結構應該足以讓你開始。數據獲取函數存在於Display組件中，並通過道具中的回調傳遞給其他組件。

var DisplayController = React.createClass({ 
    getInitialState: function(){ 
     return { 
      active_tab: 0, display_data: [], 
      tabs: [{name: 'Tab 0', tab_id: 0}, {name: 'Tab 1', tab_id: 1}, {name: 'Tab 2', tab_id: 2}] 
     }; 
    } 
    changeTab: function(tab_id){ 
     this.setState({active_tab: tab_id}, apiCall); 
    } 
    apiCall: function(){ 
     //make api call based off of this.state.active_tab 
     //this.setState({display_data: whatever you get back from api}) 
    } 
    render: function(){ 
     dprops = { 
      tabs: this.state.tabs. 
      changeTab: this.changeTab, 
      active_tab: this.state.active_tab, 
      display_data: this.state.display_data 
     }; 
     return (<MainMenu {...dprops}/>); 
    } 
}); 

var MainMenu = React.createClass({ 
    changeTab: function(tab_id){ 
     this.props.changeTab(tab_id); 
    }, 
    render: function(){ 
     tabs = this.props.tabs.map(function(tab){ 
      return <Tab onClick={this.changeTab.bind(tab.tab_id)} name={tab.name} key={tab.tab_id}/> 
     }.bind(this)); 
     return(
      <div> 
       {tabs} 
       <Display {...this.props} /> 
      </div> 
     ); 

    } 
}); 

var Tab = React.createClass({ 
    render: function(){ 
     // make your tab component here from this.props.name 
    } 
}); 
var Display = React.createClass({ 
    render: function(){ 
     // make your display component here using data from this.props 
    } 
});