React项目中实现锚点点击加类、切换移除类的方法求助

要实现点击菜单切换高亮的效果，核心思路是在父组件维护当前选中项的状态，通过props把状态和点击事件传递给子组件，子组件根据状态动态切换类名。具体实现步骤如下：

1. 修改父组件 HeaderMenu #

• 添加状态管理当前选中的菜单项（用href作为唯一标识）
• 编写点击事件处理函数，更新选中状态
• 将状态和事件传递给Menu组件

修改后的代码：

import { useState, useEffect } from "react";
import Menu from "./Menu"; // 确保组件引入路径正确

export function HeaderMenu() {
  const [menuList, setMenuList] = useState([]);
  // 新增：维护当前选中的菜单href
  const [activeHref, setActiveHref] = useState('');

  useEffect(() => {
    fetch("data/menu.json")
      .then((res) => res.json())
      .then((result) => {
        setMenuList(result);
        // 可选：默认选中第一个菜单
        if(result.length > 0) setActiveHref(result[0].href);
      })
      .catch((error) => console.log(error));
  }, []);

  // 新增：处理菜单点击事件
  const handleMenuClick = (e, href) => {
    // 保留锚点跳转的默认行为，若不需要跳转可添加 e.preventDefault()
    setActiveHref(href);
  };

  return (
    <div>
      <nav>
        <ul className="header__menu">
          {menuList.map((menu, index) => (
            <li key={index}>
              {/* 传递状态和点击事件给子组件 */}
              <Menu 
                href={menu.href} 
                name={menu.name} 
                activeHref={activeHref}
                onClick={(e) => handleMenuClick(e, menu.href)}
              />
            </li>
          ))}
        </ul>
      </nav>
      <button
        id="menu_toggle"
        className="header__toggle"
        aria-label="navigation menu toggle"
      >
        <i className="fa-solid fa-bars"></i>
      </button>
    </div>
  );
}

2. 修改子组件 Menu #

• 接收父组件传递的activeHref和onClick事件
• 根据当前菜单的href是否匹配activeHref，动态添加高亮类

修改后的代码：

import React from "react";

export default function Menu({ href, name, activeHref, onClick }) {
  return (
    <a 
      className={`header__menu__item ${activeHref === href ? 'active' : ''}`} 
      href={href}
      onClick={onClick}
    >
      {name}
    </a>
  );
}

3. 添加高亮样式 #

在你的CSS文件中补充active类的样式，示例：

.header__menu__item.active {
  color: #2563eb;
  border-bottom: 2px solid #2563eb;
  font-weight: 600;
  /* 可自定义其他高亮效果 */
}

关键说明 #

• 状态提升：把选中状态放在父组件中，确保所有子菜单共享同一状态，实现点击切换时的全局更新
• 唯一标识：用href作为选中标识（默认每个菜单的href是唯一的），如果你的菜单没有唯一href，也可以用name或自定义id替代
• 锚点兼容性：如果href是页面内锚点（如#about），点击后会自动执行滚动跳转，同时完成高亮状态切换；外部链接也能正常跳转且更新选中状态

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