Использование Bootstrap с React: Bootstrap раскрывающееся меню не открывается

Question

ОТКАЗ ОТ ОТВЕТСТВЕННОСТИ: Этот вопрос был ранее задан, но не в контексте реакции, и предоставленные ответы не полностью применимы к моему случаю.

Я начинаю использовать Bootstrap с React, следуя этому учебнику .

После установки Bootstrap, jquery и popper:

npm install bootstrap jquery и поппер. js

И добавление их в src / index. js:

import React from 'react';
import ReactDOM from 'react-dom';
import ThemeSwitcher from './components/themeSwitcher'

import 'bootstrap/dist/css/bootstrap.min.css';
import $ from 'jquery';
import Popper from 'popper.js';

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

И создание переключателя тем компонент:

import React, { Component } from 'react';

class ThemeSwitcher extends Component {

  state = { theme: null }

  resetTheme = evt => {
    evt.preventDefault();
    this.setState({ theme: null });
  }

  chooseTheme = (theme, evt) => {
    evt.preventDefault();
    this.setState({ theme });
  }

  render() {

    const { theme } = this.state;
    const themeClass = theme ? theme.toLowerCase() : 'secondary';

    return (
      <div className="d-flex flex-wrap justify-content-center position-absolute w-100 h-100 align-items-center align-content-center">

        <span className={`h1 mb-4 w-100 text-center text-${themeClass}`}>{ theme || 'Default' }</span>

        <div className="btn-group">

          <button type="button" className={`btn btn-${themeClass} btn-lg`}>{ theme || 'Choose' } Theme</button>

          <button type="button" className={`btn btn-${themeClass} btn-lg dropdown-toggle dropdown-toggle-split`} data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
            <span className="sr-only">Toggle Theme Dropdown</span>
          </button>

          <div className="dropdown-menu">

            <a className="dropdown-item" href="#" onClick={e => this.chooseTheme('Primary', e)}>Primary Theme</a>
            <a className="dropdown-item" href="#" onClick={e => this.chooseTheme('Danger', e)}>Danger Theme</a>
            <a className="dropdown-item" href="#" onClick={e => this.chooseTheme('Success', e)}>Success Theme</a>

            <div className="dropdown-divider"></div>

            <a className="dropdown-item" href="#" onClick={this.resetTheme}>Default Theme</a>
          </div>

        </div>

      </div>
    );

  }

}

export default ThemeSwitcher;

Вот что я получаю в результате:

Поэтому я считаю, что bootstrap отлично работает. Но когда я нажимаю, ничего не происходит, поэтому я предполагаю, что проблема лежит где-то с интеграцией jquery?
PS: Вот что я получаю при проверке:

Answer 1

Исходя из ссылки, которую вы связали, похоже, что вы пропустили зависимость - Bootstrap.js

Требуемый импорт в требуемом порядке для индекса . js

import 'bootstrap/dist/css/bootstrap.min.css';
import $ from 'jquery';
import Popper from 'popper.js';
import 'bootstrap/dist/js/bootstrap.bundle.min'; // you forgot this

Вероятно, лучше просто использовать реагировать bootstrap.

Answer 2

Вы забыли включить файл is, который требуется для любой интерактивности (например, раскрывающегося списка кнопок)

Использование bootstrap непосредственно в реакции не рекомендуется. Вы, вероятно, столкнетесь с такими проблемами. Я бы посоветовал вам использовать реактивный ремень или реагировать - bootstrap (я предпочитаю позже), если вы хотите использовать bootstrap в своем приложении реакции.

Answer 3

Если вы находитесь в Bootstrap v4, вы можете использовать элемент <button/> вместо <a/>, поэтому вам не нужно передавать событие.

Тогда вы уверены, что классы с заглавными значениями существуют? в bootstrap? Я думаю, что нет btn-Primary, но есть btn-primary

Более того, я предлагаю вам использовать реагировать - bootstrap, хотя.