改变不直接处理事件ReactJs
为了更好地理解我的问题组件的状态,看看我的组件图:https://app.box.com/s/rkq9bhyzs00971x6xgpq8exmvu4zzjlt改变不直接处理事件ReactJs
通过查看图像,你可以看到我基本上是有一个组件结构
Browse Widget
-Main Menu
-Display
-SubMenu
-SubCategory
-SearchBar
-Video Display
我的显示组件包含从API中提取的所有组件。但是他们依赖于了解MainMenu组件具有活动的选项卡以进行正确的查询。每次点击一个Tab时,我想更新Display的状态(使用来自API的新调用)。这可能吗?
我对于如何改变组件上的状态并不直接处理事件本身有点遗憾?
我需要改变我的组件结构,或者是否有更好的方法来做到这一点?您可以指向/制作的任何示例?
我建议跟踪活动选项卡并管理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
}
});
我注意到你使用了SubMenu,你的意思是使用MainMenu(就像我的组件?)。也不会假定父母/子女关系。我正在寻找显示器以了解主菜单(其兄弟)的情况。 – ApathyBear
我试图澄清我编辑中的命名。有一个父组件(DisplayController)管理其状态的数据是很好的,然后它的子组件可以通过道具对状态的变化作出反应。这可以保持您的组件的一致性,同时只需要在一个地方更新数据。 – Mark
谢谢。抱歉打扰另一个问题,但你会在哪里听changeTab事件?你在标签本身上放置onClicks吗?如果是这样,那么DisplayController中的changeTab如何运行? – ApathyBear
我想你可以创建一个JavaScript自定义事件来触发标签变化,并在显示组件,该事件 –
反应你能提供一个例子添加监听? – ApathyBear
请查看https://developer.mozilla.org/en-US/docs/Web/Guide/Events/Creating_and_triggering_events –