我使用 Bootstrap 编写了一个导航栏并使用react。为了获得bootstrap的功能，必须安装jquery.js和bootstrap.js。我只是想基本上使用bootstrap的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>
        );
    }
}

最佳答案

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

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

关于javascript - 从 Bootstrap 到 reactjs 的导航栏，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/39588816/