如何獲取React-Bootstrap導航欄中的按鈕？

所以顯然你不能把DOM元素放在React-Bootstrap導航欄中。我想添加一個登錄按鈕到我的網站的標題。標題由我的徽標和React-Bootstrap導航欄組件組成。我當前的所有Navbar子項都是NavItem組件。如何獲取React-Bootstrap導航欄中的按鈕？

我希望登錄按鈕是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

來源

2017-10-04 jtylerm

裏面的一切<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正確對齊

來源

2017-10-07 00:10:13 Jalissa

登錄按鈕停留在導航欄的左邊，即使它是在Nav及其RouteNavItem子級後指定。我怎樣才能讓登錄按鈕位於鏈接的右側？ – jtylerm

@jtylerm嘗試在'登錄'按鈕上添加'className ='pull-right'' – Jalissa

它仍然停留在左邊 – jtylerm

如何獲取React-Bootstrap導航欄中的按鈕？

回答

相關問題