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

Question

显然你不能将 DOM 元素放入 React-Bootstrap Navbar 中。我想在我网站的页眉中添加一个登录按钮。 header 由我的 Logo 和 React-Bootstrap Navbar 组件组成。我当前的所有 Navbar 子项都是 NavItem 组件。

我希望登录按钮成为 Navbar 的可折叠(汉堡菜单)部分的一部分，但与其他 NavItems 不同的是，此按钮并不意味着是一个将改变 URL 路径的链接。单击时，登录按钮只会呈现一个 React-Bootstrap Modal 组件。

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

我的代码...

<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 是我写的自定义组件，但它与登录按钮的功能没有任何关系。

**** 编辑 ****

这是一张图片的链接，展示了我希望网站标题的外观... 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正确对齐