从 Bootstrap 到 reactjs 的导航栏

Question

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

我需要用 reactjs 实现一点帮助来编程导航。 这是我的标题的来源。我需要帮助在没有 bootstrap.js 和 jquery.min.js 的情况下对 reactjs 中的导航栏进行编程

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

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

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

Answer 2

您可以通过使用 react-bootstrap 包在您的 react 组件中轻松使用 bootstrap。 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>
        );
    }
}