如何使用 Bootstrap 在 Reactjs 中使用数据切换折叠? [英] How to use data toggle collapse in Reactjs with Bootstrap?

问题描述

我正在将纯 Bootstrap 与 Reactjs 一起使用，并且我使用 Bootstrap 组件构建了一个导航栏，但我面临的问题是数据切换折叠不起作用.

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

这里是 index.js 文件

import '../node_modules/bootstrap/dist/css/bootstrap.min.css';从反应"导入反应；从 'react-dom' 导入 ReactDOM；导入'./index.css';从'./App'导入应用程序；从 './registerServiceWorker' 导入 registerServiceWorker；ReactDOM.render(, document.getElementById('root'));注册服务工作者()；

这里是 app.js

import React, { Component } from 'react';导入'./App.css';从'./components/navBar/navBar'导入导航栏；类 App 扩展组件 {使成为() {返回 (<div><导航栏/>

);}}导出默认应用程序；

这里是 NavBar.js 文件

import React, { Component } from 'react';类导航栏扩展组件{使成为() {返回 (<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导航"><span className="navbar-toggler-icon"></span><div className="collapse navbar-collapse" id="navbarNavAltMarkup"><div className="navbar-nav"><a className="nav-item nav-link active" href="/">Home 

</nav>

);}}导出默认导航栏；

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

解决方案

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

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

import React, { Component } from "react";导出默认类菜单扩展组件{构造函数(道具){超级(道具)；this.state = {菜单:假};this.toggleMenu = this.toggleMenu.bind(this);}切换菜单(){this.setState({ 菜单: !this.state.menu })}使成为() {const show = (this.state.menu) ?显示":";返回 (<nav className="navbar navbar-expand-lg navbar-light bg-light"><a className="navbar-brand";href=/">导航栏</a><button className="navbar-toggler";类型=按钮"onClick={ this.toggleMenu }><span className="navbar-toggler-icon"></span><div className={"collapse navbar-collapse "+ 显示}><div className="navbar-nav"><a className="nav-item nav-link active";href=/">首页

</nav>);}}

I am using pure Bootstrap with Reactjs and I have build a navBar using Bootstrap component but the problem I am facing is with data toggle collapse it is not working.

When I shrink my display view size then the hamburger icon becomes visible but when I click on it then nothing happens. While it works perfect with pure HTML and JS but not working with reactjs.

Here is index.js file

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

Here is 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;

here is NavBar.js file

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;

This is complete code I have used for navBar.

解决方案

Bootstrap menu toggle is a JS functionality. It's not a good idea to mix the JS part of Bootstrap with ReactJS, since both libraries manipulate the DOM and it can lead to bigger problems.

I suggest implementing the small functionality you need. Most of the menu toggle is just a class toggle thing.

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>

  );
  }
}

这篇关于如何使用 Bootstrap 在 Reactjs 中使用数据切换折叠?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！