javascript - 在组件中单击链接时如何关闭 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

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

在您的 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