javascript - 如何使用 Bootstrap 在 Reactjs 中使用数据切换折叠？

Question

我将纯 Bootstrap 与 Reactjs 结合使用，并且我已经使用 Bootstrap 组件构建了一个导航栏，但我面临的问题是数据切换折叠无法正常工作。

当我缩小我的显示 View 大小时，汉堡包图标变得可见，但是当我点击它时，什么也没有发生。虽然它适用于纯 HTML 和 JS，但不适用于 reactjs。

这里是index.js文件

import '../node_modules/bootstrap/dist/css/bootstrap.min.css';
import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './App';
import registerServiceWorker from './registerServiceWorker';

ReactDOM.render(<App />, document.getElementById('root'));
registerServiceWorker();

这是 app.js

import React, { Component } from 'react';
import './App.css';
import NavBar from './components/navBar/navBar';

class App extends Component {
  render() {
    return (
      <div>
      <NavBar />
    </div>
    );
  }
}

export default App;

这里是 NavBar.js 文件

import React, { Component } from 'react';

class NavBar extends Component {
  render() {
    return (
      <div>

        <nav className="navbar navbar-expand-lg navbar-light bg-light">
          <a className="navbar-brand" href="/">Navbar</a>
          <button className="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNavAltMarkup" aria-controls="navbarNavAltMarkup" aria-expanded="false" aria-label="Toggle navigation">
            <span className="navbar-toggler-icon"></span>
          </button>
          <div className="collapse navbar-collapse" id="navbarNavAltMarkup">
            <div className="navbar-nav">
              <a className="nav-item nav-link active" href="/">Home <span class="sr-only">(current)</span></a>
              <a className="nav-item nav-link" href="/">Features</a>
              <a className="nav-item nav-link" href="/">Pricing</a>
              <a className="nav-item nav-link" href="/">logout</a>
            </div>
          </div>
        </nav>
      </div>
    );
  }
}

export default NavBar;

这是我用于导航栏的完整代码。

Answer 1

Bootstrap 菜单切换是一种 JS 功能。将 Bootstrap 的 JS 部分与 ReactJS 混合不是一个好主意，因为这两个库都操作 DOM，这可能会导致更大的问题。

我建议实现您需要的小功能。大多数菜单切换只是类切换。

import React, { Component } from "react";

export default class Menu extends Component {

  constructor(props) {
    super(props);
    this.state = {
      menu: false
    };
    this.toggleMenu = this.toggleMenu.bind(this);
  }

  toggleMenu(){
    this.setState({ menu: !this.state.menu })
  }

  render() {

  const show = (this.state.menu) ? "show" : "" ;

  return (

    <nav className="navbar navbar-expand-lg navbar-light bg-light">
      <a className="navbar-brand" href="/">Navbar</a>
      <button className="navbar-toggler" type="button" onClick={ this.toggleMenu }>
        <span className="navbar-toggler-icon"></span>
      </button>
      <div className={"collapse navbar-collapse " + show}>
        <div className="navbar-nav">
          <a className="nav-item nav-link active" href="/">Home <span class="sr-only">(current)</span></a>
          <a className="nav-item nav-link" href="/">Features</a>
          <a className="nav-item nav-link" href="/">Pricing</a>
          <a className="nav-item nav-link" href="/">logout</a>
        </div>
      </div>
    </nav>

  );
  }
}