React中点击map渲染的图片时如何单独修改其src属性

问题根源在于你之前用单个布尔值控制所有图标的状态，导致所有图标同步切换。要实现单个图标独立切换，需要跟踪具体选中的ID（单选）或选中ID集合（多选），让每个图标根据自身ID判断状态。

方案1：单选模式（仅允许选中一个图标） #

1. 修改App组件，维护选中ID状态 #

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

function App() {
  // 存储当前选中的图标ID，初始为null（无选中）
  const [selectedId, setSelectedId] = useState(null);

  const handleSelection = (id) => {
    // 点击时切换：如果是当前选中的ID则取消，否则选中该ID
    setSelectedId(prev => prev === id ? null : id);
  };

  return (
    <div className="App">
      <TempCheck handleSelection={handleSelection} selectedId={selectedId} />
    </div>
  );
}

export default App;

2. 更新TempCheck组件，根据选中ID切换图片路径 #

import React from 'react';
import Icons from "./file.json";

export const TempCheck = ({handleSelection, selectedId}) => {
  return (
    <div>
      {Icons?.ids?.map(id => {
        const iconData = Icons[id];
        return (
          <div className="icon-container" key={iconData.id}>
            <img 
              src={selectedId === id ? iconData.selected : iconData.unselected} 
              alt={iconData.label} 
              onClick={() => handleSelection(id)} 
            />
            <p className="icon">{iconData.label}</p>
          </div>
        )
      })}
    </div>
  )
}

方案2：多选模式（允许选中多个图标） #

1. 修改App组件，维护选中ID集合 #

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

function App() {
  // 存储所有选中的图标ID，初始为空数组
  const [selectedIds, setSelectedIds] = useState([]);

  const handleSelection = (id) => {
    setSelectedIds(prev => {
      if (prev.includes(id)) {
        // 已选中，从集合中移除该ID
        return prev.filter(item => item !== id);
      } else {
        // 未选中，添加该ID到集合中
        return [...prev, id];
      }
    });
  };

  return (
    <div className="App">
      <TempCheck handleSelection={handleSelection} selectedIds={selectedIds} />
    </div>
  );
}

export default App;

2. 更新TempCheck组件，判断当前ID是否在选中集合中 #

import React from 'react';
import Icons from "./file.json";

export const TempCheck = ({handleSelection, selectedIds}) => {
  return (
    <div>
      {Icons?.ids?.map(id => {
        const iconData = Icons[id];
        const isSelected = selectedIds.includes(id);
        return (
          <div className="icon-container" key={iconData.id}>
            <img 
              src={isSelected ? iconData.selected : iconData.unselected} 
              alt={iconData.label} 
              onClick={() => handleSelection(id)} 
            />
            <p className="icon">{iconData.label}</p>
          </div>
        )
      })}
    </div>
  )
}

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