React-Bootstrap下拉列表未扩展

Question

我刚刚开始在我的网站中实现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 - 下拉不扩展 当检查以下内容时正在注册点击elements:Gyazo Screenshare - 在dom中重新渲染

有关此错误发生的方式和原因的任何想法？

编辑:我目前正在使用React 16

编辑2:这是Github回购.
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>它会呈现为启用状态，并为单击事件添加事件侦听器以关闭菜单。

问题是，同样的事件，然后立即在处理RootCloseWrapper和rootClose被触发其关闭菜单的时候了。

检查它是否有效

如果您单击某个其他链接，然后使用Tab键聚焦下拉菜单项，您可以使用空格键或向下箭头键展开菜单。

Answer 2

请务必安装react-dom$ 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';

我希望这有帮助。