我试图让 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>
这是上述代码的沙箱。
你可以使用showprops
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);
在这里检查代码沙盒
CSS解决方案：你只需要添加renderMenuOnMount={true}您的NavDropdown元素是这样的：
<NavDropdown title={name} id={name} renderMenuOnMount={true}>
...menu items...
</NavDropdown>
在 CSS 中：
.nav-item.dropdown:hover .dropdown-menu {
display: block;
}