React移动端导航菜单点击锚点后无法关闭的解决求助

核心思路 #

菜单的开闭状态open和更新函数setOpen托管在Burger组件中，需要把setOpen传递给RightNav，再给每个导航链接添加点击事件调用setOpen(false)来关闭菜单。

具体修改步骤 #

1. 给RightNav传递状态更新函数

修改Burger.jsx，在渲染RightNav时传入setOpen函数：

// Burger.jsx 返回部分修改
return (
  <>
    <StyledBurger open={open} onClick={() => setOpen(!open)} id="burger" className='burger'>
      <div />
      <div />
      <div  />
    </StyledBurger>
    <RightNav open={open} setOpen={setOpen}/> {/* 新增setOpen传递 */}
  </>
)

2. 给导航链接添加关闭事件

修改RightNav.jsx，给每个NavHashLink和普通<a>标签添加点击关闭逻辑：

// RightNav.jsx 链接部分修改
const RightNav = ({ open, setOpen }) => {
  // 封装关闭函数，避免重复代码
  const closeMenu = () => setOpen(false);

  return (
    <Ul open={open} className="mobile-menu" id="mobile-menu">
      <NavHashLink 
        smooth to="/#welcome-section" 
        activeClassName="selected" 
        style={{ color: '#00a993' }}
        onClick={closeMenu}
      >
            What
        </NavHashLink>

        <NavHashLink 
          smooth to="/#how-section" 
          activeClassName="selected" 
          style={{ color: '#00a993' }}
          onClick={closeMenu}
        >
            How
        </NavHashLink>

        <NavHashLink 
          smooth to="/#IsItAThing-section" 
          activeClassName="selected" 
          style={{ color: '#00a993' }}
          onClick={closeMenu}
        >
            Why
        </NavHashLink>
        
        <NavHashLink 
          smooth to="/#team-section" 
          activeClassName="selected" 
          style={{ color: '#00a993' }}
          onClick={closeMenu}
        >
            Who
        </NavHashLink>

        <NavHashLink 
          smooth to="/#contact-section" 
          activeClassName="selected" 
          style={{ color: '#00a993' }}
          onClick={closeMenu}
        >
            Where
        </NavHashLink>
     
        <a 
          href='https://stories.therelevancehouse.com/' 
          style={{ color: '#00a993' }}
          onClick={closeMenu}
        > 
            Stories 
        </a>
    </Ul>
  )
}

修改完成后，点击移动端菜单中的任意链接，菜单都会自动关闭。

内容的提问来源于stack exchange，提问作者Ali dar