如何在REACT.JS中隐藏可折叠的引导导航条？

Question

我已经使用运行良好的Bootstrap 5创建了这个可折叠的导航条，但是我希望当用户单击链接时关闭它。有什么办法能做出反应吗？谢谢

React.JS肚脐：

                <nav className="navbar navbar-expand-lg navbar-light bg-light mb-4">
                    <div className="container">
                        <Link className='rubik navbar-brand fs-3' to='/'>Rick & Morty <span className='text-primary'>Wiki</span></Link>

                        <button className="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNavAltMarkup" aria-controls="navbarNavAltMarkup" aria-expanded="false" aria-label="Toggle navigation">

                            <style jsx="true">
                                {`
                                    button[aria-expanded="false"] > .close{
                                        display: none;
                                    }
                        
                                    button[aria-expanded="true"] > .open{
                                        display: none;
                                    }
                                    .navbar-toggler{
                                        border: none;
                                        font-size: 30px
                                    }
                                    .navbar-toggler:focus {
                                        text-decoration: none;
                                        outline: 0;
                                        box-shadow: none;
                                    }
                                `}
                            </style>

                            <i className="fas fa-bars open fw-bold text-dark"></i>
                            <i className="fas fa-times close fw-bold text-dark"></i>
                        </button>

                        <div className="collapse navbar-collapse justify-content-end" id="navbarNavAltMarkup">
                            <div className="navbar-nav text-center fs-5">
                                <NavLink activeclassname="active" className="nav-link" to="/">Characters</NavLink>
                                <NavLink className="nav-link" to="/episodes">Episodes</NavLink>
                                <NavLink className="nav-link" to="/location">Location</NavLink>
                            </div>
                        </div>
                    </div>
                </nav>

Answer 1

好样的！你可以用反应状态来做。

const [toggle, setToggle] = useState(false);


<button className="navbar-toggler" type="button" onClick={()=> setToggle(!toggle)}>
  <span className="navbar-toggler-icon"></span>
</button>