navbar從Bootstrap到reactjs

我已經使用Bootstrap編程了一個導航欄並作出反應。爲了獲得bootstrap的功能，必須安裝bootstrap.js和jquery.js。我只是想基本上使用bootstrap的CSS文件和reactjs的功能。使用Bootstrap和reactjs是否有意義？navbar從Bootstrap到reactjs

我需要與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> 
     ); 
    } 
}

來源

2016-09-20 joerg

什麼問題，有你的故事嗎？ –

您可以輕鬆地使用你的引導，通過使用反應的自舉包反應的組分。 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> 
     ); 
    } 
}

來源

2016-09-20 08:34:19 marcint339

我正在尋找一個沒有react-bootstrap的解決方案。 – joerg

這個解決方案的工作原理，但僅部分適用於我。我得到的反應已經崩潰了 –

您可以手動編寫一個狀態變量來處理導航欄的觸發：

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

來源

2017-03-26 00:12:25

navbar從Bootstrap到reactjs

回答

相關問題