Question

我第一次在网络反应应用程序中工作。我正在尝试实现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>);
                }
            });

问题是此方法仅适用于两个视图（两个NavBar菜单选项），但我不知道如何使用多个选项实现navBar。

感谢。

Answer 1

首先，我想建议使用像react-router这样的路由库，而不是隐藏和显示css视图（如果这是您的主导航）。主要优势在于它可以更轻松地处理网址和内部链接。因此，使用路由库，您可以直接在Bootstrap NavItems中使用链接来路由您的应用程序。

但是，我知道如果您不需要复杂的路由库，那么我继续您开始的工作，但需要进行一些更改

由于您希望灵活处理导航栏中可用的视图和选项数量，我认为最好的方法是使用ID。这只是一个意见，但对我来说，感觉就像一个更干净的方法，因为它增加了可读性。因此，我将var addUserToDB = app.get('/addUserToDB',function(req,res){ firstname = req.query.firstname; console.log(firstname) }) module.exports = addUserToDB;状态中的var express = require('express') var app = express(); app.get('addUserToDB',function(req,res){ firstname = req.query.firstname; console.log(firstname) })数组替换为hide状态，这也让我删除了使代码更简单的Container。
在添加新视图和导航选项时，我不想更新activeViewId和navegar，而是希望将所有逻辑保留在一个位置。在这种情况下，逻辑位于Container。因此，如果您要添加新视图，请更新NavBarComponent并将Container与您触发的navOptions匹配。

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

如果您对答案有任何疑问，请与我联系！

hide

Container

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

如何在React-Boostrap中创建一个可用的NavBar？

1 个答案: