React-Bootstrap Dialog Box Does Not Extend

Question

I just started implementing React-Bootstrap on my site, but the NavDropdown component will not expand when I click on it.

What I've done: npm install -s react-bootstrap

Added cssto HTML:<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/latest/css/bootstrap.min.css">

Created my component 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;

The drop-down list does not expand : Gyazo Screenshare - the drop-down list does not expand When checking elements, a click is registered: Gyazo Screenshare - re-rendering in the domain

Any ideas how and why this error occurs?

Change: I am currently working on React 16

EDIT 2: Here's the Github repository.
https://github.com/Hespen/PWA-bootstrap npm install && npm run development →localhost:1337

Answer 1

, , react-bootstrap. . NavDropdown.js, , <Dropdown.Menu /> , <RootCloseWrapper /> . render() DropdownMenu.js, , <RootCloseWrapper> , . , <RootCloseWrapper> click .

, RootCloseWrapper rootClose, .

,

- , Tab, , .

Answer 2

$ npm install --save react react-dom "", . " "

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

, .

Answer 3

create-react-app , , :

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

css, cdn.

Btw is not recommended to export your component twice (use only the default export for a single-component file)

Edit: you use the same key for two details of menu items, maybe try to change this.

Answer 4

For me it was Bootstrap 4 with a reaction bootstrap. When you upgrade to Bootstrap 3.3.7, it works.

Answer 5

  <NavDropdown title="Dropdown" id="basic-nav-dropdown">
              <NavItem id="dropdown_pos"  eventKey="4.0"  href="/dropdown" to="/dropdown" >Dropdown1</NavItem>
        </NavDropdown>