React移动端汉堡菜单点击链接后无法自动关闭问题求助

核心原因 #

react-scroll的Link组件内部可能阻止了事件冒泡，导致你在外层div或NavMobile标签上绑定的关闭事件无法触发；另外直接给NavMobile标签加onClick，如果子组件内部没有传递事件逻辑，也不会生效。

可行解决方案 #

方案1：给子组件传递关闭回调，绑定到每个滚动链接上 #

在父组件定义关闭菜单的函数，通过props传递给NavMobile组件，然后在子组件的每个react-scroll的Link上添加onClick事件调用这个回调：

1. 父组件代码：

import { useState } from 'react';
import NavMobile from './NavMobile';

function Header() {
  const [navMobile, setNavMobile] = useState(false);

  const closeMobileNav = () => {
    setNavMobile(false);
  };

  return (
    <header>
      {/* 汉堡按钮 */}
      <button onClick={() => setNavMobile(!navMobile)}>汉堡菜单</button>
      {navMobile && <NavMobile closeNav={closeMobileNav} />}
    </header>
  );
}

2. 子组件NavMobile代码：

import { Link } from 'react-scroll';

function NavMobile({ closeNav }) {
  return (
    <div className="nav-mobile">
      <Link
        to="home"
        smooth={true}
        duration={500}
        onClick={closeNav}
      >
        首页
      </Link>
      <Link
        to="about"
        smooth={true}
        duration={500}
        onClick={closeNav}
      >
        关于我们
      </Link>
      {/* 其他链接同理添加onClick */}
    </div>
  );
}

export default NavMobile;

方案2：利用事件委托批量处理 #

如果链接较多，不想逐个绑定，可以在NavMobile的外层容器上绑定onClick，通过判断点击目标来触发关闭：

子组件代码：

import { Link } from 'react-scroll';

function NavMobile({ closeNav }) {
  const handleContainerClick = (e) => {
    // 检测点击的是链接元素（或其内部子元素）
    if (e.target.closest('a')) {
      closeNav();
    }
  };

  return (
    <div className="nav-mobile" onClick={handleContainerClick}>
      <Link to="home" smooth={true} duration={500}>首页</Link>
      <Link to="about" smooth={true} duration={500}>关于我们</Link>
      {/* 其他链接 */}
    </div>
  );
}

export default NavMobile;

注意：如果react-scroll的Link内部强制阻止了事件冒泡，这个方法会失效，此时优先用方案1。

总结 #

优先选择方案1，直接给每个滚动链接绑定关闭回调，逻辑清晰且不受事件冒泡影响，能确保点击链接后菜单立即关闭，同时不影响滚动到目标区域的功能。

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