React-Bootstrap 下拉菜单没有扩展

IT技术 twitter-bootstrap reactjs react-bootstrap
2021-05-05 10:01:00

我刚刚开始在我的站点中实现 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 屏幕共享 - 下拉列表不扩展 检查时正在注册点击elements：Gyazo 屏幕共享 - 在 dom 中重新渲染

关于如何以及为什么发生此错误的任何想法？

编辑：我目前在 React 16 上运行

编辑 2：这是 Github 存储库。
https://github.com/Hespen/PWA-bootstrap npm install && npm run development ->localhost:1337

4个回答

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

点击下拉菜单

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

在 RootCloseWrapper 中处理相同的点击

检查它是否有效

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

一定要安装 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';

我希望这有帮助。

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

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

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

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

编辑：您对 2 个菜单项props使用相同的 eventkey 可能会尝试更改此设置。

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

其它你可能感兴趣的问题
上一篇不平床更换平地加热床 下一篇灯丝不进料，然后最终堵塞