React-Bootstrap 下拉菜单未扩展答案

【问题标题】：React-Bootstrap dropdown not expandingReact-Bootstrap 下拉菜单未扩展
【发布时间】：2017-11-18 16:45:23
【问题描述】：

我刚刚开始在我的站点中实现 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

【问题讨论】：

它工作得很好，这是一个工作代码框链接codesandbox.io/s/z6x0jlxowl
这是否意味着存在 Babel 捆绑问题？
是的，这可能是一个问题，你能不能只创建一个你的代码的要点，或者一个重现你问题的代码框，否则真的很难帮助
您的代码看起来不错，但很难用工作代码进行调试，如果您可以制作 fiddle 或 plunker ，将会很有帮助。
github.com/Hespen/PWA-bootstrap 我在代码和框中没有得到相同的结果。但这是一个 github 克隆

标签： twitter-bootstrap reactjs react-bootstrap

【解决方案1】：

这很可能是react-bootstrap 中的一个错误。菜单实际上是立即显示和隐藏的。如果您检查NavDropdown.js 的代码，您会看到它包含<Dropdown.Menu /> 作为一个容器，它使用<RootCloseWrapper /> 来处理菜单的关闭。如果您在DropdownMenu.js 的render() 方法中放置一个断点，您将看到这个<RootCloseWrapper> 第一次被渲染为应有的禁用状态。当您单击下拉菜单项时，<RootCloseWrapper> 将呈现为已启用，并为单击事件添加事件侦听器以关闭菜单。

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

检查它是否有效

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

【讨论】：

啊，是的，似乎使用选项卡实际上显示了下拉菜单。这不是我这边可以解决的吗？这实际上是 react-bootstrap 中的一个错误？
如果 react-bootstrap 可以与 create-react-app 一起正常工作，那么您使用的库组合可能会出现问题，特别是如果它们提供了一些事件抽象。我可以稍后再看，但最好是 react-bootstrap 团队的人来看看。
在这种情况下，我将在 Github repo 上提出一个问题，看看他们是否可以提供一些反馈。感谢您的见解！
将 react-bootstrap 升级到 0.33.1 为我解决了这个问题。

【解决方案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';

我希望这会有所帮助。

【讨论】：

我的索引页面上有一个渲染。这些导入也不能解决问题：/

【解决方案3】：

您的代码正在使用这些依赖版本的 create-react-app，也许尝试更新：

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

使用与您的 cdn 链接相同的 css。

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

编辑：您对 2 个菜单项道具使用相同的事件键可能会尝试更改此设置。

【讨论】：

这似乎没有解决问题。它仍然没有扩大
你能用一个简单的 create-react-app 重现这个问题吗？
不，但我找不到为什么它在创建反应应用程序之外不起作用的问题。
所以我们可能需要更多详细信息，您能否添加您的 package.json，这可能是您的 babel 配置问题
github repo 已经在 cmets 中的某个地方。我将它添加到主要问题中。 github.com/Hespen/PWA-bootstrap -> npm install && npm run development -> localhost:1337

【解决方案4】：

对我来说，它是带有 react-bootstrap 的 Bootstrap 4。当您降级到 Bootstrap 3.3.7 时，它可以工作。

【讨论】：

【解决方案5】：

我在使用组件树上方的门户的上下文时看到了这样的问题：

<MyContext.Provider value={props}>
  {children}
  {ReactDOM.createPortal(
    <MyComponent />,
    document.body,
  )}
</MyContext.Provider>

我通过为门户创建一个容器来修复它：

<MyContext.Provider value={props}>
  {children}
  {ReactDOM.createPortal(
    <MyComponent />,
    document.getElementById('portal'),
  )}
</MyContext.Provider>

【讨论】：