javascript - 如何检查 React Bootstrap Navbar 是否已折叠？

Question

我想更改折叠的导航栏的内容，但找不到它的任何 Prop 或事件。 这是我的导航栏，下拉菜单处于非折叠状态。

并折叠导航栏。需要为其他内容更改下拉菜单。

示例代码

<Navbar expand="sm" bg="primary" variant="dark" fixed="top">
    <Navbar.Toggle aria-controls="responsive-navbar-nav"/>
    <Navbar.Collapse id="responsive-navbar-nav">
        <Nav className="ml-auto">
            <NavDropdown>
                <NavDropdown.Item>Profile</NavDropdown.Item>
                <NavDropdown.Divider />
                <NavDropdown.Item>Log out</NavDropdown.Item>
            </NavDropdown>
        </Nav>
    </Navbar.Collapse>
</Navbar>

如何以正确的方式做到这一点？ 提前致谢!

Answer 1

我能够通过绑定(bind)到 Navbar 的 onToggle 函数并使用它来设置 bool 值来做到这一点。

const Header = () => {
    const [expanded, setExpanded] = useState(false)

    const setToggle = () => {
        console.log('toggle');
        setExpanded(true)
    }
    
    return (
            <Navbar expand="sm" onToggle={setToggle}>
                <Navbar.Toggle aria-controls="responsive-navbar-nav"/>
                <Navbar.Collapse id="responsive-navbar-nav">
                    <Nav className="ml-auto">
                        {expanded && <NavDropdown>
                            <NavDropdown.Item>Profile</NavDropdown.Item>
                            <NavDropdown.Divider />
                            <NavDropdown.Item>Log out</NavDropdown.Item>
                        </NavDropdown>}
                    </Nav>
                </Navbar.Collapse>
            </Navbar>
    )
}