Twitter bootstrap 如何在React Boostrap中制作工作导航条？

我第一次在web react应用程序中工作。我正在尝试实现一个

NavBar

，但在实现功能时遇到了一点麻烦，这就是我迄今为止所得到的（我使用回流来实现组件之间的通信）：

getInitialState:function（）{
返回{
隐藏：[假，真]，
}
},
纳维加：功能（项目）{
var tmp=[]；
for（var i=0；i

问题是这种方法只适用于两个视图（两个

NavBar

菜单选项），但我不知道如何使用多个选项实现我的

NavBar

---

谢谢。

首先，如果这是您的主要导航，我建议您使用路由库，如，而不是使用css隐藏和显示视图。其主要优点是，它使处理URL和内部链接变得更加容易。因此，使用路由库，您可以直接使用引导NavItems中的链接来路由应用程序

但是，我理解如果您不需要复杂的路由库，那么我继续您开始的工作，但做了一些更改

• 由于您希望在导航栏中提供的视图和选项的数量上具有灵活性，我认为最好的方法是使用Ids。这只是一个观点，但对我来说，这是一个更干净的方法，因为它增加了可读性。因此，我将

  容器

  状态中的

  隐藏

  数组替换为

  activeViewId

  状态，这也让我可以删除

  navegar

  ，从而使代码更简单
• 在添加新视图和导航选项时，我不必同时更新

  容器

  和

  NavBarComponent

  ，而是将所有逻辑保留在一个位置。在这种情况下，逻辑位于

  容器中。因此，如果要添加新视图，请更新
  navOptions
  ，并将这些
  viewId
  与触发
  hide
  的ID相匹配

下面是一个工作示例，您可以通过更新

容器

组件添加任意多的视图和导航选项

如果您对答案有任何疑问，请告诉我

const RB=ReactBootstrap；
const Navbar=RB.Navbar；
const NavItem=RB.NavItem；
常量导航=常规导航；
var Container=React.createClass({
getInitialState:函数（）{
返回{
activeViewId:“主视图”
}
},
导航器：功能（id）{
这是我的国家({
activeViewId:id
});
},
render:function（）{
常量导航选项=[
{标题：“品牌标题”，视图ID:“mainView”}，
{标题：“第一个选项卡”，视图ID：“第一个选项卡视图”}，
{标题：“第二个选项卡”，视图ID：“第二个选项卡视图”}，
{标题：“Dietas Compatidas”，视图ID:“西班牙语选项卡视图”}
];
返回(
视图1
视图2
视图3
视图4
);
}
});
var NavBarComponent=React.createClass({
手柄选择：功能（选择键）{
this.props.onClick（selectedKey）；
},
默认道具：{
//退路
选项：[
{标题：“品牌标题”，视图ID:“mainView”}
]
},
render:function（）{
返回(
{this.props.options[0].title}
{this.props.options.map（（option，n）=>{
如果（n==0）{返回null；}
返回{option.title}
})}
{this.props.children}
);
}
});
ReactDOM.render(
,
document.getElementById（'app'）
);
。隐藏{
显示：无；
}
李{
列表样式类型：无；
}


 getInitialState: function() {
               return {
                 hide:[false,true],
               }
             },
             navegar: function(item){
                var tmp =[];
                for (var i = 0; i < this.state.hide.length; i++) {
                    if (i == (item-1)){
                        tmp[i] = false; 
                    }else{
                        tmp[i] = true; 
                    }
                }

                this.setState({hide:tmp});
             },

             render: function() {
       return (
         <div>
          <NavBarComponent onClick={this.navegar}/>
          <ViewComponent1 className={this.state.hide[0] ? 'hidden' : ''}/>
          <ViewComponent2 className={this.state.hide[1] ? 'hidden' : ''}/>


        </div>
        );
    }

var NavBarComponent = React.createClass({
                handleSelect: function(selectedKey) {
                    this.props.onClick(selectedKey);
                },
                render: function() {
                 return (
                    <div>          
                        <Navbar fluid activeKey={1} >             
                            <Navbar.Header>
                                <Navbar.Brand>
                                    <NavItem eventKey={1} onSelect={this.handleSelect}>TITLE</NavItem>
                                        </Navbar.Brand>
                                        <Navbar.Toggle />                    
                            </Navbar.Header>
                            <Navbar.Collapse>
                                <Nav navbar onSelect={this.handleSelect}>
                                    <NavItem eventKey={2}>First Tab</NavItem>
                                    <NavItem eventKey={3}>Second Tab</NavItem>
                                    <NavItem eventKey={4}>Dietas Compartidas</NavItem>           
                                    //Etc.....
                                    </Nav>
                                </Navbar.Collapse>              
                        </Navbar>            
                    </div>);
                }
            });