web-dev-qa-db-ja.com

ブートストラップを使用したReactjsでデータトグル折りたたみを使用するにはどうすればよいですか？

私は純粋なBootstrap=を使用しており、Bootstrapコンポーネントを使用してnavBarを構築しましたが、データトグルの崩壊で問題が機能していません。

ディスプレイビューのサイズを縮小すると、ハンバーガーアイコンが表示されますが、クリックしても何も起こりません。純粋な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;

これは、navBarに使用した完全なコードです。

javascriptreactjstwitter-bootstrapreact-router
6
Neha Sharma

ブートストラップメニュートグルはJS機能です。両方のライブラリがDOMを操作し、より大きな問題を引き起こす可能性があるため、Bootstrap=のJS部分をReactJSと混合することはお勧めできません。

必要な小さな機能を実装することをお勧めします。メニューの切り替えのほとんどはクラスの切り替えにすぎません。

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>

  );
  }
}
8
Davo

代わりに Reactstrap を使用することをお勧めします。これは、jQueryを必要としない反応コンポーネントとしてのbootstrapコンポーネントのコレクションです。

0
Vinit Sarvade