将Bootstrap中的导航栏转换成ReactJS

Question

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

- Aaron

---

你遇到了什么问题？ - Santosh Khalse

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

- Evan Siroky

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

- marcint339

---

我正在寻找一种不需要使用react-bootstrap的解决方案。 - Aaron

这个解决方案对我来说部分有效。我已经得到了折叠的反应。 - sdet.ro