如何在React-Bootstrap导航栏中添加按钮？

Question

如何在React-Bootstrap导航栏中添加按钮？

twitter-bootstrapreactjsbootstrap-modalreact-bootstrap

3

所以显然你不能在React-Bootstrap Navbar中放置DOM元素。我想在我的网站头部添加一个登录按钮。标题由我的标志和React-Bootstrap Navbar组件组成。我当前的Navbar子元素都是NavItem组件。

我希望登录按钮成为Navbar可折叠（汉堡菜单）部分的一部分，但与其他NavItems不同，此按钮不打算成为改变URL路径的链接。单击登录按钮将只呈现React-Bootstrap Modal组件。

如何使登录按钮成为我的Navbar的一部分？

我的代码...

<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

- jtylerm

1个回答

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Jalissa · Accepted Answer

<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以实现正确的对齐