navbar from bootstrap to reactjs

Question

부트 스트랩을 사용하여 navbar를 프로그래밍하고 반응했습니다. 부트 스트랩의 기능을 얻으려면 bootstrap.js jquery.js가 설치되어 있어야합니다. 기본적으로 부트 스트랩의 CSS 파일과 reactjs의 기능을 사용하고 싶습니다. Bootstrap을 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의 네비게이션 바에을 programm에하는 도움을 필요로 당신의 반응 - 부트 스트랩 패키지를 사용하여 구성 요소를 반응한다. https://react-bootstrap.github.io/

다음은 사용하려는 navbar의 예입니다.

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> 
    ) 
    } 
}