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

Question

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

侧边栏.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

首先是堆栈溢出响应，请耐心等待。另外，似乎我有点晚了，但希望这可以帮助其他人。

在您的Menu 组件中，添加： (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