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

回答

相关问题