twitter-bootstrap - 如何在 React-Bootstrap 中制作一个有效的 NavBar？

Question

我是第一次在 Web React 应用程序中工作。我正在尝试实现一个 NavBar，但在实现该功能时遇到了一些麻烦，这是我目前所得到的(我使用 REFLUX 进行组件之间的通信):

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

问题是此方法仅适用于两个 View (两个 NavBar 菜单选项)，但我不知道如何使用多个选项实现我的 navBar。

谢谢。

Answer 1

首先我想推荐使用像react-router这样的路由库如果这是您的主要导航，则不要使用 css 隐藏和显示 View 。主要优势在于它使处理 url 和内部链接变得更加容易。因此，使用路由库，您可以直接在 Bootstrap NavItems 中使用链接来路由您的应用。

但是，我知道如果您不需要复杂的路由库，所以我继续您开始的工作，但做了一些更改

• 由于您希望灵活控制导航栏中可用的 View 和选项的数量，我认为最好的方法是使用 ID。这只是一种意见，但对我来说，它感觉像是一种更简洁的方法，因为它增加了可读性。所以我更换了 hide Container 中的数组的状态为 activeViewId状态，这也让我删除你的 navegar这使代码更简单。
• 不必同时更新 Container和 NavBarComponent添加新 View 和导航选项时，我更喜欢将所有这些逻辑放在一个地方。在这种情况下，逻辑在 Container 中.因此，如果您想添加新 View ，请更新 navOptions并匹配那些 viewId s 与您触发 hide 的 ID .

下面是一个工作示例，您可以通过更新 Container 添加任意数量的 View 和 NavOptions。组件。

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

const RB = ReactBootstrap;
const Navbar = RB.Navbar;
const NavItem = RB.NavItem;
const Nav = RB.Nav;

var Container = React.createClass({
  getInitialState: function() {
    return {
      activeViewId: "mainView"
    }
  },

  navegar: function(id){
    this.setState({
      activeViewId: id
    });
  },

  render: function() {
    const navOptions = [
      {title: "BRAND TITLE", viewId: "mainView"},
      {title: "First tab", viewId: "first-tab-view"},
      {title: "Second tab", viewId: "second-tab-view"},
      {title: "Dietas Compartidas", viewId: "spanish-tab-view"}
    ];

    return (
      <div>
        <NavBarComponent onClick={this.navegar} options={navOptions}>
          <div className={this.state.activeViewId !== "mainView" ? 'hidden' : ''}>View 1</div>
          <div className={this.state.activeViewId !== "first-tab-view" ? 'hidden' : ''}>View 2</div>
          <div className={this.state.activeViewId !== "second-tab-view" ? 'hidden' : ''}>View 3</div>
          <div className={this.state.activeViewId !== "spanish-tab-view" ? 'hidden' : ''}>View 4</div>
        </NavBarComponent>
      </div>
    );
  }
});

var NavBarComponent = React.createClass({
  handleSelect: function(selectedKey) {
    this.props.onClick(selectedKey);
  },
  
  defaultProps: {
    // fallback
    options: [
      {title: "BRAND TITLE", viewId: "mainView"}
    ]
  },

  render: function() {
    return (
      <div>
        <Navbar fluid activeKey={this.props.options[0].viewId} >
          <Navbar.Header>
            <Navbar.Brand>
              <NavItem eventKey={this.props.options[0].viewId} onSelect={this.handleSelect}>
                {this.props.options[0].title}
              </NavItem>
            </Navbar.Brand>
            <Navbar.Toggle />                    
            </Navbar.Header>
            <Navbar.Collapse>
              <Nav navbar onSelect={this.handleSelect}>
                {this.props.options.map((option, n) => {
                  if (n === 0) {return null;}
                  return <NavItem key={option.viewId} eventKey={option.viewId}>{option.title}</NavItem>
                })}
              </Nav>
            </Navbar.Collapse>              
        </Navbar>
        {this.props.children}
      </div>
    );
  }
});

ReactDOM.render(
    <Container/>,
    document.getElementById('app')
);

.hidden {
  display: none;
}
li {
  list-style-type: none;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-bootstrap/0.30.7/react-bootstrap.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/latest/css/bootstrap.min.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/latest/css/bootstrap-theme.min.css" />
<div id="app"></div>