[英]How do I get a button inside a React-Bootstrap Navbar?
So apparently you can't put DOM elements inside the React-Bootstrap Navbar. 因此,显然您不能将DOM元素放入React-Bootstrap导航栏中。 I want to add a Login button to my site's header. 我想在网站标题中添加一个“登录”按钮。 The header is made up of my logo and a React-Bootstrap Navbar component. 标题由我的徽标和React-Bootstrap Navbar组件组成。 All my current Navbar children are NavItem components. 我当前所有的Navbar子级都是NavItem组件。
I want the login button to be part of the collapsable (hamburger menu) part of the Navbar, but unlike the other NavItems, this button is not meant to be a link that will alter the URL path. 我希望登录按钮成为导航栏的可折叠(汉堡菜单)部分的一部分,但是与其他NavItems不同,该按钮并不意味着是会更改URL路径的链接。 When clicked, the login button will just render a React-Bootstrap Modal component. 单击后,登录按钮将仅呈现一个React-Bootstrap Modal组件。
How do I get the Login button to be a part of my Navbar? 如何使“登录”按钮成为导航栏的一部分?
My code... 我的代码...
<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 is a custom component I wrote, but it doesn't have anything to do with the functionality of the Login button. RouteNavItem是我编写的自定义组件,但与“登录”按钮的功能无关。
**** EDIT **** ****编辑****
This is a link to a picture of how I want the header of the site to look... https://s3.amazonaws.com/tylermayberry/Screen+Shot+2017-10-09+at+3.17.34+PM.png 这是指向我希望网站标题如何显示的图片的链接... https://s3.amazonaws.com/tylermayberry/Screen+Shot+2017-10-09+at+3.17.34+PM .png
Everything inside <Navbar.Collapse/>
component is going to be inside of the hamburger menu. <Navbar.Collapse/>
组件内的所有内容都将在汉堡菜单内。
So you need to add your button inside the collapse component like this: 因此,您需要像这样在折叠组件中添加按钮:
<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>
NOTE: using Navbar.Form for proper alignment 注意:使用Navbar.Form进行正确对齐
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.