ReactJS中点击时仅高亮指定div的实现方案

核心思路 #

通过React状态管理当前激活的菜单项索引，结合动态类名实现点击高亮切换，同时规避直接操作DOM或冗余状态结构的问题。

修复后的完整代码 #

import React, { useState } from "react";
import "../css/sidebar.css";
import loginuser from "../img/login-user.svg";
import logoutuser from "../img/login-lock.svg";

export default function Sidebar() {
  // 按分组整理所有菜单项数据
  const menuItems = [
    { 
      group: "MENU", 
      items: [
        { label: "LABS", icon: loginuser },
        { label: "Assignments", icon: loginuser },
        { label: "Submitted Codes", icon: loginuser },
        { label: "Study Material", icon: loginuser }
      ]
    },
    { 
      group: "ACCOUNT", 
      items: [
        { label: "Profile", icon: loginuser },
        { label: "Log Out", icon: logoutuser }
      ]
    }
  ];

  // 初始化激活状态为第一个菜单项的全局索引
  const [activeIndex, setActiveIndex] = useState(0);
  let globalIndex = 0;

  return (
    <div className="sidebarmenu">
      {menuItems.map((group) => (
        <>
          <p className="menu-name">{group.group}</p>
          {group.items.map((item) => {
            const isActive = globalIndex === activeIndex;
            // 动态拼接类名，激活时添加高亮样式
            const itemClass = `sidebarmenuitem ${isActive ? "sidebarmenuitemactive" : ""}`;
            
            const handleClick = () => setActiveIndex(globalIndex);
            globalIndex++;

            return (
              <div key={item.label} className={itemClass} onClick={handleClick}>
                <img src={item.icon} alt="Pict-CodeLab" className="img" />
                <p className="opt-name">{item.label}</p>
              </div>
            );
          })}
        </>
      ))}
    </div>
  );
}

关键修复说明 #

• 数据驱动渲染：将菜单项整理为数组，通过循环渲染消除重复代码，解决之前单个div生成多副本的问题。
• 简化状态管理：仅用activeIndex存储当前激活项的全局索引，初始值设为0实现默认第一个菜单项高亮。
• 动态类名控制：根据activeIndex判断当前项是否激活，自动拼接对应的CSS类名，无需手动操作DOM。
• 点击逻辑优化：点击菜单项时直接更新activeIndex，自动取消其他项的高亮状态，逻辑简洁可靠。

原方案失效原因 #

• 原生JS操作DOM：React组件重渲染时会更新虚拟DOM，直接绑定的事件监听可能失效，且违背React状态管理的设计思路。
• 冗余状态结构：之前的appState包含复杂的对象结构，状态更新逻辑冗余，未正确关联到菜单项的渲染逻辑。

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