Javascript 更改非'；t在ReactJs中直接处理事件

为了更好地理解我的问题，请查看我的组件图：

通过查看图像，您可以看到我基本上有一个组件结构

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

我的显示组件包含从API中提取的所有组件。但是，它们取决于是否知道主菜单组件的选项卡处于活动状态，以便进行正确的查询。每次单击选项卡时，我都想更新显示状态（使用API的新调用）。这可能吗

我对如何更改不是直接处理事件本身的组件的状态有点迷茫

---

我是否需要更改组件结构，或者是否有更好的方法？你能举出什么例子吗

我建议跟踪活动选项卡并管理来自DisplayController组件的所有API调用。使用下面的结构应该足以让您开始。数据获取函数位于显示组件中，并通过props中的回调传递给其他组件

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 
    }
});

var DisplayController=React.createClass({
getInitialState:函数（）{
返回{
活动\u选项卡：0，显示\u数据：[]，
选项卡：[{name:'Tab 0'，Tab_id:0}，{name:'Tab 1'，Tab_id:1}，{name:'Tab 2'，Tab_id:2}]
};
}
更改选项卡：功能（选项卡id）{
this.setState（{active_tab:tab_id}，apiCall）；
}
apiCall:function（）{
//基于此.state.active\u选项卡进行api调用
//this.setState（{display_data:which you return from api}）
}
render:function（）{
dprops={
选项卡：this.state.tabs。
changeTab:this.changeTab，
活动选项卡：此.state.active选项卡，
显示\u数据：this.state.display\u数据
};
返回（）；
}
});
var main菜单=React.createClass({
更改选项卡：功能（选项卡id）{
this.props.changeTab（选项卡id）；
},
render:function（）{
tabs=this.props.tabs.map（函数（选项卡）{
返回
}.约束（这个）；
返回(
{tabs}
);
}
});
var Tab=React.createClass({
render:function（）{
//在此使用this.props.name创建选项卡组件
}
});
var Display=React.createClass({
render:function（）{
//使用this.props中的数据在此处创建显示组件
}
});

我认为您可以创建一个JavaScript自定义事件，在选项卡更改时触发，并在显示组件中添加一个对该事件做出反应的侦听器。您可以提供一个示例吗？请检查这个示例，这与我想要的示例不完全一样，但无论如何都要感谢。我注意到您使用了子菜单，您是否打算使用MainMenu（如我的组件中的一样？）。这也不会假设父母/孩子的关系。我正在寻找显示器，以了解主菜单（其同级菜单）中发生了什么。我试图在编辑中澄清命名。最好有一个父组件（DisplayController）在其状态下管理数据，然后它的子组件可以通过道具对状态的变化做出反应。这将保持组件之间的一致性，同时只需在一个位置更新数据。谢谢。很抱歉要问另一个问题，但是您将在哪里收听changeTab事件？您是否在选项卡上放置了onclick？如果是这样，那么如何使DisplayController中的changeTab运行呢？是的，onClick侦听器连接到每个选项卡。单击选项卡时，将调用MainMenu changeTab函数，并将相应的选项卡id传递到该函数中。这反过来调用props（最初来自DisplayController）的回调，并传递tab_id参数。然后，此函数使用正确的选项卡id设置活动选项卡的状态。如果这回答了您的问题，请告诉我。