Создание раскрывающегося списка React Bootstrap NavDropdown при наведении

Question

Я пытаюсь в выпадающем меню 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>

, а вот песочница приведенного выше кода.

Answer 1

Вы можете использовать show prop

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