从Bootstrap到reactjs的导航栏 [英] navbar from Bootstrap to reactjs

问题描述

我已经使用Bootstrap编程了一个导航栏并做出反应.为了获得bootstrap的功能，必须安装bootstrap.js和jquery.js.我只想基本使用bootstrap的CSS文件和reactjs的功能.将Bootstrap与reactjs一起使用是否有意义?

I have programmed a navbar using Bootstrap and react. In order to obtain the functionality of bootstrap must be installed and bootstrap.js jquery.js. I just want to basically use the CSS file of bootstrap and the functionality of reactjs. Does it make sense to use Bootstrap with reactjs?

我需要通过reactjs来实现一些帮助，以对导航进行编程. 这是我标头的来源.我需要帮助在没有bootstrap.js和jquery.min.js

I need to realize with reactjs a little help to program the navigation. Here the source of my header. I need help to programm the navbar in reactjs without bootstrap.js and 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>
        );
    }
}

推荐答案

您可以手动编写状态变量来处理导航栏的切换:

You can manually code a state variable to handle the toggling of the navbar:

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

这篇关于从Bootstrap到reactjs的导航栏的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！