如何在点击任何链接时关闭侧边栏

Question

当我点击它时，我正在创建一个Sidenav栏显示，但当它显示时，我想让它在任何链接被点击时都会关闭

以下是我如何创建侧导航栏打开：

const App = (props) => {
const [ menuOpen, setMenuOpen ] = useState(false);
return (
<HamburgerUlityItem>
<InputNavbar type="checkbox" onClick={() => setMenuOpen(!menuOpen)} />
<HamburgerLine />
</HamburgerUlityItem>
...)
const SideNav = (props) => {
return (
<Wrapper>
{props.menuOpen ? (
<HamburgerSize>
<AllItems>
<ListItems to="/product-category/top"> TOPS </ListItems>
<Item to="/product-category/top/t-shirt"> T - Shirts </Item>
<Item to="product-category/top/shirts"> Shirts </Item>
<Item to="product-category/top/hoodies"> Hoodies </Item>
<Item to="product-category/top/coats"> Jackets & Coats </Item>
<ListItems to="/product-category/bottom"> BOTTOMS </ListItems>
<Item to="product-category/bottom/pants"> Pants </Item>
<Item to="product-category/bottom/shorts"> Shorts </Item>
<ListItems to="/product-category/bag"> BAGS & BACKPACKS </ListItems>
<ListItems to="/about-us"> ABOUT US </ListItems> <ListItems to="/contact"> CONTACT </ListItems>
</AllItems>
</HamburgerSize>
) : null})

单击任何链接时，如何关闭侧边栏？

Answer 1

根据注释部分，SideNav是App组件的子级。因此，只需将状态和状态设置器向下传递到SideNav，然后，当单击Item时，只需设置menuOpen到false，或者简单地否定状态。

const App = (props) => {
return(
...
<SideNav menuOpen={menuOpen} setMenuOpen={setMenuOpen }/>
)
}

车载导航：

<Item to="/product-category/top/t-shirt" onClick={()=>{props.setMenuOpen(!props.menuOpen)}}> T - Shirts </Item>