React：如何在map渲染的卡片中仅修改点击卡片的CSS样式

你当前的问题是用了一个全局状态card控制所有卡片的类名，所以点击任意卡片时，所有卡片的样式都会同步变化。要实现仅修改点击卡片的样式，需要让每张卡片的状态独立，或者跟踪被点击卡片的唯一标识，下面提供两种可行方案：

方案一：跟踪选中的卡片ID（单张切换） #

适合仅允许单张卡片处于切换后样式的场景：

1. 修改状态定义，改为跟踪选中卡片的ID：

const [selectedCardId, setSelectedCardId] = useState(null);

2. 更新点击事件处理函数，切换选中状态：

const toggleCard = (projectId) => {
  // 点击已选中的卡片则取消选中，否则选中该卡片
  setSelectedCardId(prevId => prevId === projectId ? null : projectId);
};

3. 渲染卡片时根据选中ID判断类名：

{projs.map(function(project){
  return(
    <div 
      key={project.id} // 必须添加唯一key，React列表渲染要求
      className={selectedCardId === project.id ? "cardOff" : "cardOn"} 
      onClick={() => toggleCard(project.id)} 
    >
      <div className="projectImage">{project.image}</div>
      <p className="projectTitle">{project.title}</p>
    </div>
  );
})}

注意：原代码中所有卡片使用重复的id（如projectContainer）违反DOM规范，建议改用className或拼接唯一ID避免冲突。

方案二：给每个项目维护独立激活状态（多张切换） #

如果需要支持同时切换多张卡片的样式，可给每个项目添加独立的激活状态：

1. 初始化时为每个项目添加active字段：

// 复制原数组并添加active属性，避免修改原数据
const [projects, setProjects] = useState(projs.map(item => ({...item, active: false})));

2. 更新点击函数，切换对应项目的激活状态：

const toggleCard = (projectId) => {
  setProjects(prevProjects => 
    prevProjects.map(project => 
      project.id === projectId 
        ? {...project, active: !project.active} 
        : project
    )
  );
};

3. 渲染时根据项目的active状态设置类名：

{projects.map(function(project){
  return(
    <div 
      key={project.id}
      className={project.active ? "cardOff" : "cardOn"} 
      onClick={() => toggleCard(project.id)} 
    >
      <div className="projectImage">{project.image}</div>
      <p className="projectTitle">{project.title}</p>
    </div>
  );
})}

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