twitter-bootstrap - 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 - Dropdown not expanding检查 elements 时正在记录一次点击: Gyazo Screenshare - rerendering in 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键聚焦下拉菜单项，您可以使用空格键或向下箭头键展开菜单。