如何在 React-Bootstrap 导航栏中获取按钮？

Question

显然你不能将 DOM 元素放在 React-Bootstrap 导航栏中。我想在我的站点 header 中添加一个登录按钮。 header 由我的徽标和 React-Bootstrap 导航栏组件组成。我当前所有的 Navbar children 都是 NavItem 组件。

我希望登录按钮成为导航栏可折叠（汉堡菜单）部分的一部分，但与其他 NavItem 不同的是，此按钮并不意味着 link 会改变 URL 路径。单击时，登录按钮将只呈现一个 React-Bootstrap 模态组件。

如何让登录按钮成为我的导航栏的一部分？

我的代码...

<Navbar staticTop inverse collapseOnSelect>
   <Navbar.Header>
       <Navbar.Brand id="navbarBrand">
           <img id="logoImg" src="/images/bvLogo.svg" />
       </Navbar.Brand>
       <Navbar.Toggle />
   </Navbar.Header>
   <Navbar.Collapse>
       <Nav pullRight>
           <RouteNavItem className="headerLinks" eventKey={1} href="/">Home</RouteNavItem>
           <RouteNavItem className="headerLinks" eventKey={2} href="/shop">Shop</RouteNavItem>
           <RouteNavItem className="headerLinks" eventKey={3} href="/about">About</RouteNavItem>
           <RouteNavItem className="headerLinks" eventKey={4} href="/cart">Cart</RouteNavItem>
       </Nav>
   </Navbar.Collapse>
</Navbar>
<Button id="loginBtn" onClick={this.open}>Login</Button>

RouteNavItem 是我写的一个自定义组件，但它与登录按钮的功能没有任何关系。

**** 编辑 ****

这是一张 link 我希望网站 header 看起来如何的图片... https://s3.amazonaws.com/tylermayberry/Screen+Shot+2017-10-09+at+3.17.34+PM.png

Answer 1

<Navbar.Collapse/> 组件内的所有内容都将位于汉堡菜单内。

因此您需要像这样在折叠组件中添加按钮：

<Navbar.Collapse>
    <Nav pullRight>
         <RouteNavItem className="headerLinks" eventKey={1} href="/">Home</RouteNavItem>
         <RouteNavItem className="headerLinks" eventKey={2} href="/shop">Shop</RouteNavItem>
         <RouteNavItem className="headerLinks" eventKey={3} href="/about">About</RouteNavItem>
         <RouteNavItem className="headerLinks" eventKey={4} href="/cart">Cart</RouteNavItem>
     </Nav>
     <Navbar.Form pullRight> 
         <Button bsStyle="primary">Login</Button>
    </Navbar.Form>
</Navbar.Collapse>

注意：使用 Navbar.Form 进行正确对齐

如何在 React-Bootstrap 导航栏中获取按钮？

How do I get a button inside a React-Bootstrap Navbar?

twitter-bootstrap

bootstrap-modal

reactjs

react-bootstrap