我有一个SubMenu组件。在其render函数中,它有一个简单的if-else语句,用于检查哪个选项卡处于活动状态。根据活动选项卡,它返回一些JSX。
这是完整的SubMenu组件:
var SubMenu = React.createClass({
render: function(){
var subCategories = this.props.groupsData.objects[0].sub_groups.map(function(obj, index){
return (<li><a href="#">{obj.display_name}</a></li>);
}, this);
if (this.props.dprops.active_tab === 0){ // if the active tab is "All Videos"
return (<div className="tabbable tabs-left item-list-container col-md-12 items-grid">
<ul className="nav nav-pills nav-stacked col-md-2" ><li className="active"><a href="#">Most Recent</a></li><li><a href="#">Most Popular</a></li><li><SearchBar /></li></ul>
<VideoDisplay itemsData={this.props.itemsData}/>
</div>);
} else { // if the active tab is anything else
return (<div className="tabbable tabs-left item-list-container col-md-12 items-grid">
<ul className="nav nav-pills nav-stacked col-md-2" >{subCategories}<li><SearchBar /></li></ul>
<VideoDisplay itemsData={this.props.itemsData}/>
</div>);
}
}
});
一切正常渲染,但当我切换活动菜单标签时,我的SubMenu渲染不正确(见下图),如果我改回活动标签0,我收到错误:Danger: Discarding unexpected node: <li data-reactid=".0.0.1.0.0.2.0">…</li>
加载时显示正确 (最近和最受欢迎的是SubMenu)
切换到“类别1”后显示不正确(注意:额外的搜索框):
知道为什么会发生这种情况以及如何解决这个问题?