如何检查 React Bootstrap Navbar 是否已折叠？答案

【问题标题】：How to check if React Bootstrap Navbar has collapsed?如何检查 React Bootstrap Navbar 是否已折叠？
【发布时间】：2020-03-23 00:44:29
【问题描述】：

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

然后折叠导航栏。需要将 Dropdown 更改为其他内容。

示例代码

<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>

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

【问题讨论】：

标签： javascript reactjs navbar react-bootstrap

【解决方案1】：

我可以通过绑定到导航栏的 onToggle 函数并使用它来设置布尔值来做到这一点。

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>
    )
}

【讨论】：