在 React 中使用 canvas html5 的清晰方法，无需始终渲染所有画布形状

Question

目前，我使用 React 堆栈从事 Saas 平台的 ETL 项目。我尝试找到一种干净的方法来将画布与 React 一起使用，并在调用 React Render 函数时仅渲染 Canvas 的某些形状，而无需每次都创建新的画布

我的想法是让一个组件与 JSX 发生反应，如下所示：

    <MyReactCanvas>
      <MyShape1 positionX= "10", positionY="10">
      <MyShape2>
      <MyGroupShape>
        <MyShape3>
      </MyGroupShape>
    <MyReactCanvas>

我的目标是拥有这样的东西： ETL 示例

如果您有一些关于如何在 React 中使用画布的建议、文章、代码或信息

Answer 1

如果我正确理解您的问题，您就可以<canvas />在 React 项目中使用 HTML5 标签和行为（如果您使用的是 React-Dom）。如果您有在纯 HTML 中使用 HTML5 Canvas 的经验，那么它应该与在 React 中使用它非常相似，您可以将其放置在 JSX 中。

例如：

import React from "react";

export default function App() {
  React.useEffect(() => {
    var c = document.getElementById("myCanvas");
    var ctx = c.getContext("2d");
    ctx.moveTo(0, 0);
    ctx.lineTo(200, 100);
    ctx.stroke();
  }, []);

  return (
    <div>
      <h1>HTML5 Canvas + React.js</h1>
      <canvas
        id="myCanvas"
        width="200"
        height="100"
        style={{ border: "1px solid #d3d3d3" }}
      >
        Your browser does not support the HTML canvas tag.
      </canvas>
    </div>
  );
}

此示例创建一个元素并在渲染组件<canvas />时绘制一条线。<App />请参阅此stackblitz的实例。

最近的一篇文章“Canvas with React.js”将是一个很好的起点。