如何在React中优化不同菜单项之间的className切换逻辑

首先你现有代码存在一个错误：第二个「Favorites」菜单项的onClick回调仍然传值0，点击后无法正确切换激活状态，需要先修正这个问题。

下面是大幅简化后的优化方案： #

核心优化思路 #

1. 把菜单项的配置抽成独立数组，通过循环渲染生成菜单，避免重复编写相同的li、a标签结构
2. 简化动态类名的判断逻辑，不用重复书写固定类名

优化后完整代码 #

import React, { useState } from 'react';
import './header.scss';

export const Header = ({ favoriteCount }) => {
  const [activeIndex, setActiveIndex] = useState(0);
  // 菜单项配置，后续新增菜单只需修改这个数组即可
  const menuList = [
    { name: 'Characters', link: '##' },
    { name: 'Favorites', link: '##' }
  ];

  return (
    <header className="header">
      <div className="container header-container">
        <ul className="header-menu">
          {menuList.map((item, index) => (
            <li key={index}>
              <a
                className={`header-menu__link ${activeIndex === index ? 'active' : ''}`}
                onClick={() => setActiveIndex(index)}
                href={item.link}
              >
                {item.name}
              </a>
            </li>
          ))}
        </ul>
        <div className="header-favorite-count">
          <i className="far fa-heart"></i>
          {favoriteCount}
        </div>
      </div>
    </header>
  );
};

如果你项目里有更复杂的多类名判断场景，可以引入clsx工具库简化写法，类名部分可以改成：

className={clsx('header-menu__link', { active: activeIndex === index })}

方案优势 #

• 剔除了重复的JSX代码，整体代码量减少60%
• 后续新增菜单项不需要复制粘贴标签逻辑，直接在配置数组里加条目即可
• 类名判断逻辑更简洁，避免重复书写固定类名，后期修改类名只需要改一处
• 修复了原代码第二个菜单项点击无法激活的问题

如果是配合路由使用的实际项目，可以把激活判断的依据从索引换成路由路径，用当前页面路径和菜单项的路径匹配来判断激活状态，不需要手动维护索引值，适配性更强。

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