Как отображать React- Bootstrap NavDropdown при наведении курсора

Question

Относится к этому вопросу , популярные ответы на который больше не работают. По умолчанию NavDropdown появляется только при нажатии, однако мне нужно, чтобы это раскрывающееся меню отображалось при наведении курсора. Я изо всех сил пытался загрузить 'React- Bootstrap' в stackoverflow, чтобы создать воспроизводимый пример, однако вот базовый c Navbar с использованием react-bootstrap, в котором показана моя попытка отобразить раскрывающийся список при наведении:

const [isStatsOpen, setIsStatsOpen] = useState(true);

<Navbar>
    <Navbar.Brand>
        <Link to='/'>
            <img alt='company logo' src={My Logo} />
        </Link>
    </Navbar.Brand>

    <Navbar.Toggle aria-controls='basic-navbar-nav' />

    <Navbar.Collapse id='basic-navbar-nav'>
        <Nav className='mr-auto'>
            <NavDropdown title='Statistics'
                onMouseEnter={() => setIsStatsOpen(true)}
                onMouseLeave={() => setIsStatsOpen(false)}
                open={isStatsOpen}
            >
                <NavDropdown.Item as={Link} to='/stats/'> Stats 1</NavDropdown.Item>
                <NavDropdown.Item as={Link} to='/stats2/'>Stats 2</NavDropdown.Item>

            </NavDropdown>

        </Nav>

        <Nav className='ml-auto'>
            <DivisionSelect />
            <AppSelect />
        </Nav>
    </Navbar.Collapse >
</Navbar >

Из указанного выше сообщения было получено 2 ответа с 10+ голосами, однако ни одно из этих решений не работает. Как указано в одном из комментариев: This doesn't work in newer versions, the dropdown isn't rendered until it's first click. You'd need to trigger the onclick before you could control via css.

После проверки страницы я могу подтвердить, что этот человек прав - нет меню, которое отображалось бы до тех пор, пока не будет нажат NavDropdown. . После щелчка появляется меню, а затем решения из этого другого сообщения работают. Учитывая это, как я могу решить эту проблему? Может ли мой компонент реакции автоматически "щелкать" Navdropdowns при загрузке, чтобы меню появлялось при наведении курсора?

Спасибо!

Answer 1

Это вам помогает? Старая добрая ваниль javascript. Я добавил идентификатор в NavDropdown и вызвал старый метод classi c document.getElementById, а затем вызвал событие click.

  useEffect(() => {
    document.getElementById("test").click();
  }, []);


          <NavDropdown
            id="test"
            title="Statistics"

https://codesandbox.io/s/react-bootstrap-demo-z36c5

Answer 2

В этой ссылке на более раннюю версию вопроса высоко оцененный ответ, который начинается с export class Nav extends React.Component {, действительно работает, если свойство open обновлено до show.