在组件中单击链接时如何关闭 react-burger-menu？

Question

我正在与negomi/react-burger-menu 合作。我想在点击链接时关闭我的侧边栏菜单而不是外部或交叉按钮点击只是链接点击然后我的侧边栏菜单会自动关闭。但问题是我的链接在另一个组件下，假设我的组件<ShipForMe/> 和我的链接在<ShipForMe/> 下，比如<NavLink to="/dashboard/ship-for-me/my-request/pending">My Request</NavLink>

Sidebar.js

<div className="sidebar-wrap " id="outer-container">
                <div className="dashboard-menu rounded">
                    <ShipForMe/>
                    <MyWallet/>
                    <Profiles/>
                    <div className="sidebar-item ds-item">
                        <div className="sidebar-item__title">
                            <NavLink to="">VIP Center</NavLink>
                        </div>
                    </div>
                </div>
                <div className="dashboard-responsive rounded">
                    <Menu pageWrapId={ "page-wrap" } outerContainerId={ "outer-container" } isOpen={false}>
                            <div id="page-wrap" style={{marginTop: '-25%'}}>
                                <ShipForMe handleUrl={handleUrl}/>
                                <MyWallet/>
                                <Profiles/>
                                <div className="sidebar-item ds-item">
                                    <div className="sidebar-item__title">
                                        <NavLink to="">VIP Center</NavLink>
                                    </div>
                                </div>
                            </div>
                    </Menu>
                </div>
            </div>

ShipForMe.js

<div className="ship-wrap ds-item">
         <div className="sidebar-item">
            <div className="sidebar-item__title">
               Ship for me
            </div>
            <ul className="sidebar-item__lists">
               <li>
                  <NavLink to="/dashboard/ship-for-me/my-request/pending">My Request</NavLink>
               </li>
               <li>
                  <NavLink to="/dashboard/ship-for-me/forwarding-parcel/abroad-to-bd">My Forwarding Parcel</NavLink>
               </li>
            </ul>
         </div>
      </div>

注意：isOpen{flase} 不起作用，它仅在链接是物理链接时才起作用。

Answer 1

第一次堆栈溢出响应，请多多包涵。 另外，我好像有点晚了，但希望这可以帮助其他人。

在您的菜单组件中，添加：(1) onOpen={handleOpen}、(2) onClose={handleOpen} 和 (3) isOpen={isOpen} 属性。

1. onOpen 将在侧边栏导航菜单打开并且我们想要时触发 将 isOpen 设置为 true
2. onClose 将在用户单击十字图标、覆盖或退出键时触发。 （假设这些都没有被禁用/修改）
3. isOpen 控制侧边栏导航菜单是打开 (true) 还是关闭 (false)。

在您的 ShipForMe 组件 中添加对将 isOpen 设置为 false 的函数的引用。在我的示例中，ShipForMe 是 SideBarLinks。而函数是closeSideBar

这是我的例子：

  const [isOpen, setOpen] = useState(false)

  const handleIsOpen = () => {
    setOpen(!isOpen)
  }

  const closeSideBar = () => {
    setOpen(false)
  }

  <Menu
    isOpen={isOpen}
    onOpen={handleIsOpen}
    onClose={handleIsOpen}
  > 
    <SideBarLinks closeSideBar={closeSideBar} />
  </Menu

const SideBarLinks = ({ closeSideBar }) => {
  return (
    <>
      <NavLink to="/#about" onClick={closeSideBar}>
        About
      </NavLink>
    </>

如果这有帮助，请告诉我，感谢任何反馈。

附加信息：react 版本 17.0.1，react-burger-menu 版本 3.0.6

参考：https://www.npmjs.com/package/react-burger-menu

Answer 2

花了很多时间摆弄问题。解决方案的一个关键部分是将适当的回调函数作为道具传递给

组件：

onStateChange={handleStateChange}

其中handleStateChange定义为：

const handleStateChange = (state) => {
  setMenuOpen(state.isOpen);
};

其中 setMenuOpen 是如下定义的状态设置器：

const [isMenuOpen, setIsMenuOpen] = React.useState(false);

您还需要一个调用 setter 的 handleCloseMenu 函数：

const handleCloseMenu = () => {
  setIsMenuOpen(false);
};

然后，您可以将 handleCloseMenu 传递给侧边栏/汉堡菜单中的按钮的 onclick。

你所有的一切：

const [isMenuOpen, setIsMenuOpen] = React.useState(false);
const handleCloseMenu = () => {
  setIsMenuOpen(false);
};
const handleStateChange = (state) => {
  setIsMenuOpen(state.isOpen);
};

return (
  <Menu isOpen={isMenuOpen} onStateChange={handleStateChange}>
     ... Link 1
     <button onClick = {()=>handleCloseMenu}/>
     ....
  </Menu>
)

这是我在 github repo 上找到的working sandbox example：

And here is the github repo。发布了一个关于进一步简化它的问题。但是一旦你传递了正确的回调，onStateChange={handleStateChange}，你应该会很好。