Как использовать сворачивание данных в Reactjs с Bootstrap? - PullRequest
Новая
       11

Как использовать сворачивание данных в Reactjs с Bootstrap?

0 голосов
/ 09 сентября 2018

Я использую чистый Bootstrap с Reactjs, и я построил navBar с использованием компонента Bootstrap, но проблема, с которой я сталкиваюсь, заключается в том, что сворачивание переключателя данных не работает.

Когда я уменьшаю размер экрана, то появляется значок гамбургера, но когда я нажимаю на него, ничего не происходит. Хотя он отлично работает с чистым HTML и JS, но не работает с реагировать.

Вот файл 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;

Это полный код, который я использовал для navBar.

Ответы [ 2 ]

0 голосов
/ 09 сентября 2018

Переключатель меню Bootstrap - это функциональность JS, смешивать JS-часть Bootstrap с 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>

  );
  }
}
0 голосов
/ 09 сентября 2018

Я бы посоветовал вам использовать Reactstrap . Это набор компонентов начальной загрузки как реагирующих компонентов без необходимости использования jQuery.

...