ReactJS渲染返回错误危险:丢弃意外节点

时间:2015-06-24 00:39:24

标签: javascript html twitter-bootstrap reactjs

我有一个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>​

加载时显示正确 enter image description here (最近和最受欢迎的是SubMenu)

切换到“类别1”后显示不正确(注意:额外的搜索框): enter image description here

知道为什么会发生这种情况以及如何解决这个问题?

0 个答案:

没有答案