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

Posted 2023-03-05

【中文标题】悬停时制作 React Bootstrap NavDropdown 下拉菜单

【英文标题】：Making a React Bootstrap NavDropdown dropdown when hovered over

【发布时间】：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。

【参考方案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;