navbar from bootstrap to reactjs

Question

私は、ブートストラップを使ってnavbarをプログラムして反応しました。ブートストラップの機能を得るには、bootstrap.js jquery.jsをインストールする必要があります。基本的にブートストラップのCSSファイルとreactjsの機能を使いたいだけです。ブートストラップとreactjsを使うのは意味がありますか？

私は、反応をプログラムするために少しの助けを借りて実現する必要があります。 私のヘッダーのソースです。私はあなたが簡単にブートストラップを使用することができますbootstrap.jsとjquery.min.js

import React from "react" 
export class Header extends React.Component { 
    render() { 
     return (
      <nav className="navbar-kwp-header navbar-default navbar-fixed-top"> 
       <div className="container"> 
        <div className="navbar-header"> 
         <button type="button" className="navbar-toggle collapsed" data-toggle="collapse" data-target="#Navbar"> 
          <span className="sr-only">Navigation ein-/ausblenden</span> 
          <span className="icon-bar"></span> 
          <span className="icon-bar"></span> 
          <span className="icon-bar"></span> 
         </button> 

         <a className="navbar-brand" href="#"><img src="images/logo.jpg" alt="" /></a> 
        </div> 

        <div id="Navbar" className="navbar-collapse collapse"> 
         <ul className="nav navbar-nav"> 
          <li><a href="#">Home</a></li> 

          <li className="dropdown"><a className="dropdown" data-toggle="dropdown" role="button" aria-expanded="false">Service <span className="caret"></span></a> 
           <ul className="dropdown-menu" role="menu"> 
            <li><a href="#">Downloads</a></li> 
            <li><a href="#">Glossar</a></li> 
            <li><a href="#">Newsletter</a></li> 
           </ul> 
          </li> 

         </ul> 
        </div> 
       </div> 
      </nav> 
     ); 
    } 
} 

Answer 1

なしreactjsでナビゲーションバーをプログラムの開発するために助けが必要あなたの反応-ブートストラップパッケージを使用してコンポーネントを反応させます。 https://react-bootstrap.github.io/

これは、使用したいナビゲーションバーの例です。

import React from "react" 
import { Navbar, Nav, NavItem, NavDropdown, MenuItem } from 'react-bootstrap'; 

export class Header extends React.Component { 
    render() { 
     return (
      <Navbar> 
       <Navbar.Header> 
        <Navbar.Brand> 
         <a href="#">React-Bootstrap</a> 
        </Navbar.Brand> 
       </Navbar.Header> 
       <Nav> 
        <NavItem eventKey={1} href="#">Link</NavItem> 
        <NavItem eventKey={2} href="#">Link</NavItem> 
        <NavDropdown eventKey={3} title="Dropdown" id="basic-nav-dropdown"> 
         <MenuItem eventKey={3.1}>Action</MenuItem> 
         <MenuItem eventKey={3.2}>Another action</MenuItem> 
         <MenuItem eventKey={3.3}>Something else here</MenuItem> 
         <MenuItem divider /> 
         <MenuItem eventKey={3.3}>Separated link</MenuItem> 
        </NavDropdown> 
       </Nav> 
      </Navbar> 
     ); 
    } 
} 

Answer 2

手動でナビゲーションバーのトグルを処理するために、状態変数をコーディングすることができます

class App extends Component { 
    state = { 
    navCollapsed: true 
    } 

    _onToggleNav =() => { 
    this.setState({ navCollapsed: !this.state.navCollapsed }) 
    } 

    render() { 
    const {navCollapsed} = this.state 

    return (
     <nav className='navbar navbar-default'> 
     <div className='navbar-header'> 
      <a className='navbar-brand' href='/'>Your Brand</a> 
      <button 
      aria-expanded='false' 
      className='navbar-toggle collapsed' 
      onClick={this._onToggleNav} 
      type='button' 
      > 
      <span className='sr-only'>Toggle navigation</span> 
      <span className='icon-bar'></span> 
      <span className='icon-bar'></span> 
      <span className='icon-bar'></span> 
      </button> 
     </div> 
     <div 
      className={(navCollapsed ? 'collapse' : '') + ' navbar-collapse'} 
      > 
      <ul className='nav navbar-nav navbar-right'> 
      <li> 
       <a>About</a> 
      </li> 
      </ul> 
     </div> 
     </nav> 
    ) 
    } 
}