改变不直接处理事件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 
    } 
});