map函数内div元素isActive类切换异常：点击全高亮而非单个

你的问题核心在于所有条目共用了同一个激活状态标识，导致点击时所有元素都会触发高亮。要实现单个条目独立高亮，我们需要让每个条目能判断自己是否是当前激活的那一个，而不是依赖统一的props.isActive值。下面是具体的实现思路和代码示例：

核心思路 #

1. 在父组件中维护一个状态，用来记录当前被激活的条目标识（比如条目的title或者唯一ID）
2. 遍历条目时，给每个条目判断：当前条目标识是否等于父组件的激活标识，以此决定是否添加isActive类
3. 点击条目时，将当前条目标识传递给父组件，更新激活状态

代码实现示例 #

父组件部分 #

首先在父组件中管理激活状态，并传递给子组件：

import { useState } from 'react';
import YourItemComponent from './YourItemComponent';

function ParentComponent() {
  // 初始化激活状态为第一个条目或者空
  const [activeTitle, setActiveTitle] = useState('');

  // 处理激活的函数，接收当前点击的title
  const handleActive = (title) => {
    setActiveTitle(title);
  };

  // 假设你的Items数据是这样的结构
  const Items = [
    { title: 'item1' },
    { title: 'item2' },
    { title: 'item3' }
  ];

  return (
    <div>
      <YourItemComponent 
        Items={Items} 
        activeTitle={activeTitle} 
        handleActive={handleActive} 
      />
    </div>
  );
}

子组件（你的map遍历部分） #

在子组件的map遍历中，针对每个条目做条件判断：

function YourItemComponent({ Items, activeTitle, handleActive }) {
  return (
    <div>
      {Items.map((item, i) => (
        <div className='nav col-4' key={i}>
          {/* 关键：判断当前item的title是否等于activeTitle，来决定是否添加isActive类 */}
          <div 
            className={be('Items', 'item', item.title === activeTitle ? 'isActive' : '')} 
            onClick={() => handleActive(item.title)} // 点击时传递当前item的title
            key={item.title} // 用item的title做key更可靠，避免索引key的问题
          >
            <span>{I18n.translate(`item.${item.title}`)}</span>
          </div>
        </div>
      ))}
    </div>
  );
}

关键细节说明 #

• 不要用统一的props.isActive，而是给每个条目单独判断是否匹配当前激活的标识
• 点击事件要传递当前条目的唯一标识（比如title），这样父组件才能知道要激活哪一个
• 尽量用条目的唯一属性（比如title、id）作为key，而不是数组索引，避免组件复用导致的状态问题

这样修改后，点击任何一个条目，只有匹配activeTitle的那个条目会被加上isActive类，实现单个高亮的效果。

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