如何在单击锚标记时添加类并在单击其他锚标记时删除该类

Question

我有一个问题想问这里的大家。 我正在使用 React 制作一个作品集页面，我对一件事很好奇。 我只想在单击标签时向锚标记添加一个类，并且我想在单击另一个锚标记（当然这个新单击的锚标记将具有该类）时删除该类。 我只是想了解它并想采用它来提高我的编码技能。 希望这里有很多人可以帮助我。

下面是我的jsx代码。

export function HeaderMenu() {
  const [menuList, setMenuList] = useState([]);
  useEffect(() => {
    fetch("data/menu.json")
      .then((res) => res.json())
      .then((result) => setMenuList(result))
      .catch((error) => console.log(error));
  }, []);

  return (
    <div>
      <nav>
        <ul className="header__menu">
          {menuList.map((menu, index) => (
            <li key={index}>
              <Menu href={menu.href} name={menu.name} />
            </li>
          ))}
        </ul>
      </nav>
      <button
        id="menu_toggle"
        className="header__toggle"
        aria-label="navigation menu toggle"
      >
        <i className="fa-solid fa-bars"></i>
      </button>
    </div>
  );
}

下面这个是.

的组成部分

import React from "react";

export default function Menu({ href, name }) {
  return (
    <a className="header__menu__item" href={href}>
      {name}
    </a>
  );
}

我在互联网上尝试了很多东西，但找不到正确的答案。 谢谢！

Answer 1

我不知道这对于这种情况来说是一个很好的答案，但我通常使用一些逻辑，例如对多个组件使用

useState

或

useContext

import { Dispatch, SetStateAction, createContext, useState, useEffect, useContext } from "react";

export const MenuContext = createContext<[string | null, state: Dispatch<SetStateAction<string | null>>]>([null, () => { }]);

export function HeaderMenu() {
  const [menuList, setMenuList] = useState([]);
  const [selectedMenu, setSelectedMenu] = useState(null);

  useEffect(() => {
    fetch("data/menu.json")
      .then((res) => res.json())
      .then((result) => setMenuList(result))
      .catch((error) => console.log(error));
  }, []);

  return (
    <div>
      <nav>
        <ul className="header__menu">
          <MenuContext.Provider value={[selectedMenu, setSelectedMenu]}>
            {menuList.map((menu, index) => (
              <li key={index}>
                <Menu href={menu.href} name={menu.name} />
              </li>
            ))}
          </MenuContext.Provider>
        </ul>
      </nav>
      <button
        id="menu_toggle"
        className="header__toggle"
        aria-label="navigation menu toggle"
      >
        <i className="fa-solid fa-bars"></i>
      </button>
    </div>
  );
}

import React from "react";
import { MenuContext } from "path to MenuContext";

export function Menu({ href, name }) {
  const [selectedMenu, setSelectedMenu] = React.useContext(MenuContext)

  return (
    <a onClick={() => setSelectedMenu(name)} className={`header__menu__item ${selectedMenu == name ? "your-class-here : null}`} href={href}>
      {name}
    </a>
  );
}

希望有帮助：>