如何在悬停时显示 React-Bootstrap 的 NavDropdown答案

【问题标题】：How to display React-Bootstrap's NavDropdown on Hover如何在悬停时显示 React-Bootstrap 的 NavDropdown
【发布时间】：2020-10-30 12:34:34
【问题描述】：

与this question 相关，其最佳答案不再有效。默认情况下，NavDropdown 仅在单击时出现，但是我需要此下拉菜单在悬停时显示。我努力将“React-Bootstrap”加载到 stackoverflow 中以创建一个可重现的示例，但是这是一个基本的 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 多票，但是这些解决方案都不起作用。正如它在其中一个 cmets 中指出的那样：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 之前没有可显示的菜单。单击后，菜单就在那里，然后其他帖子中的解决方案就可以工作了。鉴于这种情况，我该如何解决这个问题？我的反应组件是否可以在加载时自动“单击”导航下拉菜单，这样菜单就会出现在悬停时？

谢谢！

【问题讨论】：

标签： reactjs react-bootstrap

【解决方案1】：

这对您有帮助吗？旧的好香草 javascript。我在NavDropdown 添加了一个id，并调用了旧的、经典的document.getElementById 方法，然后触发了click 事件。

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


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

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

【讨论】：

这看起来很棒，并且您的代码框可以工作，但是在我的应用程序中似乎 useEffect 在 DOM 加载之前触发，因为我收到 document.getElementById("test") 返回 null 的错误，我控制台记录了 document 以查看 DOM 尚未加载。
似乎是DOM没有加载的问题is not new
Hacky 和肮脏的解决方案，但如果你将它包含在例如 1 秒的 setTimeout 中？
或者，另一种解决方案是使用自定义挂钩来检查组件是否已挂载，正如我在 github 上看到的一些示例

【解决方案2】：

在this link to the earlier version of the question 中，只要open 属性更新为show，以export class Nav extends React.Component { 开头的高票答案确实有效。

【讨论】：