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 />来处理菜单的关闭。如果您在DropdownMenu.js的render()方法中设置了一个断点，您将看到在第一次呈现此<RootCloseWrapper>时，它被禁用了。当您单击下拉菜单项时，<RootCloseWrapper>将呈现为已启用，并为单击事件添加事件侦听器以关闭菜单。

​

​

问题是，相同的事件随后会立即在RootCloseWrapper中处理，并且rootClose会被触发，从而立即关闭菜单。

​

​

检查它是否正常工作

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

Answer 2

一定要安装react-dom $ npm install --save react react-dom并导入"render"，这样就可以让它正常工作了。根据React-Bootstrap Getting Started page的要求，这是一个要求

我目前正在我的一个项目中使用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"
  }

使用与cdn链接相同的css。

顺便说一句，避免两次导出组件(仅对单个组件文件使用导出默认值)

编辑:你对2个菜单项道具使用了相同的Event键，也许你可以试着改变一下。