添加新文本时，Fabricjs会在react组件中创建多个嵌套画布

Question

我一直在尝试创建react功能组件，以便能够在画布中添加一些文本。即使画布渲染文本，也不能移动它们，因为它们是不同的不需要的嵌套画布。换句话说，每当你点击添加时，就会创建一个不需要的新画布。我不知道是什么原因导致了这种嵌套画布。非常感谢您的帮助。

这是的实现

https://codesandbox.io/s/thirsty-mountain-kwyw1

主组件保存状态中的文本列表

import React, { useState } from "react";
import "./styles.css";
import MyCanvas from "./MyCanvas";
const App = () => {
  const fabric = window.fabric;
  const [controls, setControl] = useState([]);
  const add = () => {
    var text = new fabric.IText(
      "Sample Text " +
        new Date()
          .getTime()
          .toString()
          .substr(5),
      {
        fontFamily: "arial black",
        left: 100,
        top: 100,
        myid: new Date()
          .getTime()
          .toString()
          .substr(5),
        objecttype: "text"
      }
    );
    setControl([...controls, text]);
  };
  return (
    <div className="App">
      <button onClick={add}>Add</button>
      <MyCanvas controls={controls} />
    </div>
  );
};
export default App;

这是画布组件

import React, { useEffect } from "react";
import { fabric } from "fabric";
const MyCanvas = ({ controls }) => {
  const canvas = new fabric.Canvas("canvas-element");
  useEffect(() => {
    if (!controls) return;
    // const canvas = new fabric.Canvas(ref.current.id);
    controls.map(item => {
      canvas.add(item).setActiveObject(item);
    });
  });
  return <canvas id="canvas-element" width={600} height={400} />;
};
export default MyCanvas;

Answer 1

我发现了这个问题。由于new fabric.Canvas("canvas-element")是一个构造函数，因此在每次渲染时，它都会创建一个新元素并将其附加到DOM中。为了防止这种不必要的行为，您应该检查Canvas是否已经在DOM树中，或者使用其他方法，如本文中描述的方法：如何将Fabric.js与React一起使用？

Answer 2

remove<反应StrictMode>标记，这将使useEffect有时执行两次。