如何为使用react-konva呈现的canvas元素设置HTML-id

Question

我在项目中使用react-konva来呈现HTML5-canvas元素：

import desktop_tea_1 from "./previews_desktop/tea_1.png";

const DesktopTea1 = () => {
    const [desktop_tea_1_const] = useImage(desktop_tea_1);
    return <Image image={desktop_tea_1_const} width={600} height={600}  />;
};

（......）

<Stage width={600} height={600}>
    <Layer ref="DesktopTea1">
        <DesktopTea1/>
    </Layer>
</Stage>

---

现在我希望HTML输出具有id （myId），如：

<canvas width="600" height="600" id="myId"></canvas>

---

我只能找到konva-id，但没有设置HTML-id。

Answer 1

最好使用尽可能少的层数。 所以我不建议在你的应用中使用它们中的很多。

没有Konva API来为图层的canvas元素设置id。 但您可以手动执行此操作：

const App = () => {
  const layerRef = React.useRef(null);
  React.useEffect(() => {
    layerRef.current.getCanvas()._canvas.id = 'some-id';
  }, []);

  return (
    <Stage width={600} height={600}>
      <Layer ref={layerRef}>
        <DesktopTea1/>
      </Layer>
    </Stage>
  );
}

如果你不打算使用太多层css :nth-of-type()可能工作得很好。