javascript - 更改React组件中返回多个重复元素的单个元素的样式

Question

我正在 React 中渲染一个 Canvas 组件，它返回 <rect> 的列表元素，我想要实现的是更改单击的 <rect> 的颜色只是，但是在我的代码中，每当我单击其中一个元素时，元素的完整列表都会更新，我如何更新单击的 <rect>仅元素？

下面是我的代码:

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

let data = [
  {
    id: "1",
    x: "50",
    y: "20",
  },
  {
    id: "2",
    x: "90",
    y: "20",
  },
  {
    id: "3",
    x: "130",
    y: "20",
  },
];

const Canvas = () => {
  const [redRectangle, setRedRectangle] = useState();

  const setColorHandler = () => {
    setRedRectangle(styles.rect);
  };

  let arr = data.map((element) => {
    return (
      <rect
        className={redRectangle}
        key={element.id}
        width="30"
        height="4"
        x={element.x}
        y={element.y}
        onClick={setColorHandler}
      />
    );
  });

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

export default Canvas;

运行代码之前

点击一个<rect>后

Answer 1

首先，为 rect 创建一个单独的组件。创建后，向 rect 组件添加组件级别状态，指定颜色。然后将矩形组件映射到canvas函数中。

映射后，创建一个函数来使用 id 更改单个矩形组件的类。每当您调用该函数时，都将元素的 id 作为参数传递给该函数。完成此操作后，使用 forEach 循环检查从参数接收到的 elementID 是否等于 currentElement Id。如果相等，则更改该特定组件的状态。

谢谢😊