web-dev-qa-db-fra.com

Comment utiliser le basculement des données dans Reactjs avec Bootstrap?

J'utilise pur Bootstrap avec Reactjs et j'ai construit un navBar en utilisant un composant Bootstrap mais le problème auquel je suis confronté est lié au repliement des données qui ne fonctionne pas.

Lorsque je réduis la taille de l'affichage, l'icône de hamburger devient visible, mais lorsque je clique dessus, rien ne se passe. Bien que cela fonctionne parfaitement avec HTML pur et JS, mais ne fonctionne pas avec reactjs.

Voici le fichier 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();

Voici 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;

voici le fichier 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;

C'est le code complet que j'ai utilisé pour navBar.

javascriptreactjstwitter-bootstrapreact-router
4
Neha Sharma

Le menu Bootstrap est une fonctionnalité de JS. Ce n’est pas une bonne idée de mélanger la partie JS de Bootstrap avec ReactJS, car les deux bibliothèques manipulent le DOM et peuvent conduire à des problèmes plus importants.

Je suggère d'implémenter la petite fonctionnalité dont vous avez besoin, la plupart des options de menu sont simplement une option de classe.

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>

  );
  }
}
2
Davo

Je vous suggère d'utiliser Reactstrap à la place. C'est une collection de composants d'amorçage qui réagissent sans avoir besoin de jQuery.

0
Vinit Sarvade