当您单击移动设备上的菜单项之一时，菜单不会折叠

Question

大家好，我需要一些帮助:)

我正在研究一个 Gatsby，React 产品组合，其中我遇到了菜单问题，当您单击移动设备上的菜单项之一时它不会折叠。

菜单在桌面上运行良好。

在我安装 react-scroll 包并进行设置之前，该菜单在所有设备上都可以正常工作。

我曾尝试在 Google 上搜索帮助，但我发现了一些类似的问题，但我仍然不知道如何解决问题。 :)

希望你能帮忙。

我的项目中有导航组件：

这是我在 SandBox 上的项目：

NavBar.js https://codesandbox.io/s/gatsby-starter-and-portfolio-jr9tn?file=/src/components/Navbar/Navbar.js

导航栏链接： https://codesandbox.io/s/gatsby-starter-and-portfolio-jr9tn?file=/src/components/Navbar/NavbarLinks.js

Answer 1

您的 CodeSandbox 已在此修复：https://codesandbox.io/s/gatsby-starter-and-portfolio-forked-43thz?file=/src/components/Navbar/NavbarLinks.js

发生的情况是，由于您安装了react-scroll，因此在选择项目时状态从未更新，因此 React 的补液从未发生，您的菜单也从未关闭。代码有点多余，但我设法让它工作。我添加的是一个通过切换菜单的道具传递的简单函数。

在您的NavBar.js 中，而不是：

  <Toggle
    navbarOpen={navbarOpen}
    onClick={() => setNavbarOpen(!navbarOpen)}
  >

如果添加了一个函数，因为直接绑定在组件中触发效果不是一个好习惯。我已将其更改为：

  <Toggle navbarOpen={navbarOpen} onClick={toggleMenu}>

toggleMenu 功能是一个简单的功能，与您之前的功能相同：

  const toggleMenu = () => setNavbarOpen(!navbarOpen)

现在，您已经隔离了该功能，您可以重用它，将其传递给您的子组件 (NavbarLinks)：

  {navbarOpen ? (
    <Navbox>
      <NavbarLinks toggleMenu={toggleMenu} />
    </Navbox>
  ) : (
    <Navbox open>
      <NavbarLinks toggleMenu={toggleMenu} />
    </Navbox>
  )}

注意：这段代码是多余的，应该重构以避免那种不必要的重复。例如，这样的事情要好得多：

  <Navbox open={navbarOpen}>
    <NavbarLinks toggleMenu={toggleMenu} />
  </Navbox>

如您所见，<NavbarLinks> 具有在toggleMenu 功能中切换菜单的功能，因此您可以在每次点击时触发该功能 (onClick)：

const NavbarLinks = ({ toggleMenu })=> {
  return (
    <>
      <NavItem
        activeClass="active"
        to="section1"
        spy={true}
        smooth={true}
        duration={1000}
        onClick={toggleMenu}
      >
        About
      </NavItem>
      <NavItem
        activeClass="active"
        to="section2"
        spy={true}
        smooth={true}
        duration={1000}
        onClick={toggleMenu}
      >
        Test
      </NavItem>
      <NavItem
        activeClass="active"
        to="section3"
        spy={true}
        smooth={true}
        duration={1000}
        onClick={toggleMenu)}
      >
        Gallery
      </NavItem>
      <NavItem to="/page-2">Contact</NavItem>
    </>
  )
}

由于您正在解构props，因此您可以直接使用toggleMenu 函数。