显然,您无法将DOM元素放入React-Bootstrap Navbar中。我想在我的网站标题中添加一个“登录”按钮。标题由我的徽标和React-Bootstrap Navbar组件组成。我当前的所有Navbar子项都是NavItem组件。
我希望登录按钮成为Navbar的可折叠(汉堡包菜单)部分的一部分,但与其他NavItems不同,此按钮并不是一个会改变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是我编写的自定义组件,但它与“登录”按钮的功能没有任何关系。
****编辑****
这是一个链接,指向我希望网站标题看起来如何... https://s3.amazonaws.com/tylermayberry/Screen+Shot+2017-10-09+at+3.17.34+PM.png
答案 0 :(得分:0)
<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进行正确对齐