React组件返回多个重复rect元素时如何仅修改被点击元素的样式

问题原因 #

你当前代码中所有<rect>的className都绑定了同一个状态变量，状态更新后所有元素都会同步应用该样式，所以点击任意矩形都会导致全部变色。

解决方案 #

将状态改为存储被点击矩形的id，渲染时逐个判断当前元素id是否与选中id匹配，仅给匹配的元素应用高亮样式即可。

修改后完整代码 #

import { useState } from "react";
import styles from "./Canvas.module.css";

// 静态数据建议用const声明
const data = [
  {
    id: "1",
    x: "50",
    y: "20",
  },
  {
    id: "2",
    x: "90",
    y: "20",
  },
  {
    id: "3",
    x: "130",
    y: "20",
  },
];

const Canvas = () => {
  // 状态存储当前选中的矩形id，初始为null（无选中）
  const [selectedRectId, setSelectedRectId] = useState(null);

  // 点击时更新选中的id
  const setColorHandler = (id) => {
    setSelectedRectId(id);
    // 如果需要点击第二次取消选中，替换为下面的代码
    // setSelectedRectId(prevId => prevId === id ? null : id)
  };

  const rectList = data.map((element) => {
    return (
      <rect
        // 仅选中的矩形应用红色样式
        className={element.id === selectedRectId ? styles.rect : ""}
        key={element.id}
        width="30"
        height="4"
        x={element.x}
        y={element.y}
        // 绑定点击事件，传入当前元素的id
        onClick={() => setColorHandler(element.id)}
      />
    );
  });

  return (
    <svg width="800" height="600" id="svg">
      {rectList}
    </svg>
  );
};

export default Canvas;

效果展示 #

运行前默认效果：

点击单个矩形后的预期效果：

修改后点击任意矩形，仅被点击的元素会应用styles.rect定义的红色样式，其余元素保持默认样式。

内容的提问来源于stack exchange，提问作者Sohaib Al Abbadi