React Scroll点击链接后汉堡菜单不消失的问题求助

你的代码里有两个关键问题导致点击菜单后无法关闭：

1. onClick事件触发时机错误
   直接把setIsActive(!isActive)写在onClick属性中，会导致组件每次渲染时就执行状态更新，而非点击元素时才触发。必须用箭头函数包裹，确保只有点击动作发生时才切换状态。

2. 冗余href属性引发冲突
   react-scroll的<Link>组件已负责处理滚动跳转逻辑，内部的<a>标签无需再添加href={item.href}——这个属性会触发浏览器默认跳转行为，既干扰react-scroll的正常工作，也可能影响点击事件的执行。

另外，初始状态useState(true)表示菜单默认展开，点击后切换为false隐藏的逻辑是合理的，但要确保className的条件判断匹配你的样式需求（比如隐藏时需添加对应的收起类，示例中用hidden类适配Tailwind CSS，可根据你的实际样式调整）。

修正后的代码 #

import React, { useState } from 'react';
import { navData } from '../data';
import Socials from './Socials';
import { Link } from "react-scroll";

const NavMobile = () => {
  const [isActive, setIsActive] = useState(true);
  const { items } = navData;

  return (
    <nav className={`${isActive ? "w-full h-full flex flex-col justify-evenly overflow-hidden" : "hidden"}`}>
      <ul className='flex flex-col justify-center items-center gap-y-6 py-6 mb-8'>
        {items.map((item, index) => {
          return (
            <Link
              key={index}
              activeClass="active"
              to={item.href}
              spy={true}
              smooth={true}
              offset={-70}
              duration={500}
              onClick={() => setIsActive(!isActive)}
            >
              <li>
                <a className='text-2xl font-primary uppercase'>
                  {item.name}
                </a>
              </li>
            </Link>
          );
        })}
      </ul>
      <div className='text-2xl'>
        <Socials />
      </div>
    </nav>
  );
};

export default NavMobile;

额外优化说明 #

• 将onClick事件移至<Link>组件上，覆盖整个链接点击区域，更符合用户交互习惯。
• 给<Link>添加key={index}，符合React列表渲染的规范（将key放在最外层组件上更合理）。
• 隐藏菜单的className从空字符串改为hidden，适配Tailwind CSS的隐藏逻辑，若使用自定义样式，替换为对应的隐藏类即可。

内容的提问来源于stack exchange，提问作者Βινς Μοργκαν