悬停时制作 React Bootstrap NavDropdown 下拉菜单答案

【问题标题】：Making a React Bootstrap NavDropdown dropdown when hovered over悬停时制作 React Bootstrap NavDropdown 下拉菜单
【发布时间】：2020-07-15 08:42:51
【问题描述】：

我试图让 React Bootstrap 中的下拉菜单栏在您悬停时显示选项。我到处寻找，所有解决方案似乎都已过时且无法正常工作，请告诉我您是否能够解决此问题。

这是我尝试将更改应用到的下拉菜单：

<Navbar>
  <NavDropdown title="Dropdown Menu">
    <NavDropdown.Item href="#action/3.1">Option 1</NavDropdown.Item>
    <NavDropdown.Item href="#action/3.1">Option 2</NavDropdown.Item>
  </NavDropdown>
</Navbar>

这是上面代码的sandbox。

【问题讨论】：

标签： html css reactjs bootstrap-4

【解决方案1】：

你可以使用showprop

import React, { Component, Fragment, useState } from "react";
import ReactDOM from "react-dom";
import { Navbar, Nav, NavDropdown } from "react-bootstrap";

const Header = props => {
  const [show, setShow] = useState(false);
  return (
    <Navbar>
      <NavDropdown
        title="Dropdown Menu"
        show={show}
        onMouseEnter={() => setShow(true)}
        onMouseLeave={() => setShow(false)}
      >
        <NavDropdown.Item href="#action/3.1">Option 1</NavDropdown.Item>
        <NavDropdown.Item href="#action/3.1">Option 2</NavDropdown.Item>
      </NavDropdown>
    </Navbar>
  );
};

function App() {
  return <Header />;
}

const rootElement = document.getElementById("root");
ReactDOM.render(<App />, rootElement);

在这里查看codeSandBox

【讨论】：

【解决方案2】：

CSS 解决方案：您只需在您的 NavDropdown 元素上添加 renderMenuOnMount={true}，如下所示：

<NavDropdown title={name} id={name} renderMenuOnMount={true}>
...menu items...
</NavDropdown>

在 CSS 中：

.nav-item.dropdown:hover .dropdown-menu {
    display: block;
}

【讨论】：