Для меня это был Bootstrap 4 с реакции-бутстрапом. Когда вы переходите на Bootstrap 3.3.7, это работает.

ько начал внедрять React-Bootstrap на своем сайте, но компонент NavDropdown не будет расширяться при нажатии на него.

Что я сделал:npm install -s react-bootstrap

добавленнойcss в HTML:<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/latest/css/bootstrap.min.css">

Создал мойNavigation составная часть:

import React from 'react';
import PropTypes from 'prop-types';
import NavbarHeader from 'react-bootstrap/lib/NavbarHeader';
import NavItem from 'react-bootstrap/lib/NavItem';
import Nav from 'react-bootstrap/lib/Nav';
import Navbar from 'react-bootstrap/lib/Navbar';
import NavbarCollapse from 'react-bootstrap/lib/NavbarCollapse';
import NavbarBrand from 'react-bootstrap/lib/NavbarBrand';
import NavbarToggle from 'react-bootstrap/lib/NavbarToggle';
import NavDropdown from 'react-bootstrap/lib/NavDropdown';
import MenuItem from 'react-bootstrap/lib/MenuItem';

export class Header extends React.PureComponent {
  render() {
   return (
    <Navbar inverse collapseOnSelect>
    <NavbarHeader>
      <NavbarBrand>
        <a href="#">React-Bootstrap</a>
      </NavbarBrand>
      <NavbarToggle />
    </NavbarHeader>
    <NavbarCollapse>
      <Nav>
        <NavItem eventKey={1} href="#">Link</NavItem>
        <NavItem eventKey={2} href="#">Link</NavItem>
        <NavDropdown eventKey={3} title="Dropdown" id="basic-nav-dropdown">
          <MenuItem eventKey={3.1}>Action</MenuItem>
          <MenuItem eventKey={3.2}>Another action</MenuItem>
          <MenuItem eventKey={3.3}>Something else here</MenuItem>
          <MenuItem divider />
          <MenuItem eventKey={3.3}>Separated link</MenuItem>
        </NavDropdown>
      </Nav>
      <Nav pullRight>
        <NavItem eventKey={1} href="#">Link Right</NavItem>
        <NavItem eventKey={2} href="#">Link Right</NavItem>
      </Nav>
        </NavbarCollapse>
      </Navbar>
    );
  }
}

export default Header;

Раскрывающийся список не будет расширяться:Gyazo Screenshare - Dropdown не расширяется Клик регистрируется при проверкеelements: Gyazo Screenshare - рендеринг в дом

Есть идеи, как и почему возникает эта ошибка?

Изменить: я в настоящее время работаю на React 16

РЕДАКТИРОВАТЬ 2: Вот репозиторий Github.
https://github.com/Hespen/PWA-bootstrap npm install && npm run development ->localhost:1337

 Shubham Khatri21 нояб. 2017 г., 18:22
Да, это может быть проблемой, можете ли вы просто создать суть своего кода и, возможно, кодов и ящик, воспроизводящий вашу проблему, в противном случае действительно трудно помочь
 Hespen26 нояб. 2017 г., 19:55
github.com/Hespen/PWA-bootstrap Я не получил тот же результат в codeandbox. Но это клон GitHub
 sheelpriy24 нояб. 2017 г., 06:45
Ваш код выглядит хорошо, его трудно отладить с помощью рабочего кода, если вы можете сделать скрипку или хлам, было бы полезно.
 Hespen21 нояб. 2017 г., 15:17
Означает ли это, что существует проблема комплектации Babel?
 Shubham Khatri21 нояб. 2017 г., 07:31
Работает просто отлично, вот рабочая коды и ссылка на ящикcodesandbox.io/s/z6x0jlxowl

Ответы на вопрос(4)

ависимостей, возможно, попробуйте обновить:

"dependencies": {
    "react": "^16.1.1",
    "react-bootstrap": "^0.31.5",
    "react-dom": "^16.1.1"
  }

Используя тот же CSS, что и ваша ссылка CDN.

Кстати, не экспортируйте ваш компонент дважды (используйте экспорт по умолчанию только для одного файла компонента)

Изменить: вы используете один и тот же ключ события для 2 реквизитов пунктов меню, возможно, попытайтесь изменить это.

 Dyo27 нояб. 2017 г., 12:36
Поэтому нам может потребоваться более подробная информация, можете ли вы добавить свой package.json, это может быть проблемой с вашей конфигурацией babel
 Dyo27 нояб. 2017 г., 12:26
Можете ли вы воспроизвести проблему с помощью простого приложения create-реагировать?
 Hespen27 нояб. 2017 г., 12:31
Нет, но я не могу найти вопрос о том, почему это не работает за пределами приложения для создания реакции.
 Hespen27 нояб. 2017 г., 12:17
Похоже, это не решило проблему. Это все еще не расширяется
 Hespen27 нояб. 2017 г., 12:53
Репозиторий github уже был где-то в комментариях. Я добавил это к основному вопросу.github.com/Hespen/PWA-bootstrap ->npm install && npm run development ->localhost:1337

$ npm install --save react react-dom и импортировать "render", чтобы все заработало. Это требование в соответствии сReact-Bootstrap Начало работы

В настоящее время я использую React-Bootstram в одном из моих проектов, вот импорт, который работает для меня:

import React, { Component } from 'react';
import ReactDOM, {render} from 'react-dom';
import PropTypes from 'prop-types';
import { Nav, Navbar, NavItem, MenuItem, NavDropdown, Modal, Jumbotron } from 'react-bootstrap';

Надеюсь, это поможет.

 Hespen27 нояб. 2017 г., 12:21
У меня есть рендер на моей странице индекса. Этот импорт также не решает проблему: /

на Bootstrap 3.3.7, это работает.

react-bootstrap, Меню на самом деле отображается и скрывается мгновенно. Если вы проверите код дляNavDropdown.js вы увидите, что он содержит<Dropdown.Menu /> в качестве контейнера, который использует<RootCloseWrapper /> для обработки закрытия меню. Если вы установите точку останова вrender() методDropdownMenu.js вы увидите, что в первый раз<RootCloseWrapper> отображается как отключенный, как и должно быть. Когда вы нажимаете на элемент выпадающего меню,<RootCloseWrapper> отображается как включенный и добавляет прослушиватели событий для события click, чтобы закрыть меню.

Проблема в том, что то же событие сразу же обрабатывается вRootCloseWrapper иrootClose срабатывает, что сразу закрывает меню.

Чтобы проверить, что это работает

Если вы нажмете на другую ссылку, а затем использоватьTab клавишей для выбора пункта раскрывающегося меню вы можете расширить меню с помощью клавиши пробела или клавиши со стрелкой вниз.

 Hespen27 нояб. 2017 г., 17:09
В этом случае я просто собираюсь поставить вопрос о репозитории Github, чтобы посмотреть, могут ли они дать какие-то отзывы о нем. Спасибо за идеи!
 Hespen27 нояб. 2017 г., 16:12
Ах да, похоже, что использование вкладки фактически показывает выпадающее меню. Это не поправимо с моей стороны? Это на самом деле ошибка в реакции-начальной загрузке?
 vl4d1m1r427 нояб. 2017 г., 16:29
Если response-bootstrap отлично работает с create-реагировать-app, то это может быть проблемой с комбинацией библиотек, которые вы используете, особенно если они предоставляют некоторую абстракцию над событиями. Я могу посмотреть дальше позже, но было бы лучше, если бы кто-то из команды ответной начальной загрузки посмотрел.

Ваш ответ на вопрос