React-Bootstrap Navbar内のボタンを取得するにはどうすればよいですか？

Question

明らかに、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は、私が書いたカスタムコンポーネントですが、それは、ログインボタンの機能とは何の関係もありません。

**** EDIT ****これは私がサイトのヘッダーを見てみたい方法の画像へのリンクである

... <Navbar.Collapse/>コンポーネント内 https://s3.amazonaws.com/tylermayberry/Screen+Shot+2017-10-09+at+3.17.34+PM.png

Answer 1

すべてが起こっていますハンバーガーメニューの中にいます。

ですから、このような崩壊コンポーネント内あなたのボタンを追加する必要があります。

<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