反应访问<canvas/>子组件的引用

Question

我正在尝试按一下按钮将 canvas 保存为 PNG 文件。

这是我现在的代码：（这部分正在工作）

  const canvasRef01 = useRef(null);

  const saveAsPng = () => {
    const canvas = canvasRef01.current;
    const dataURI = canvas.toDataURL("image / png");


    const aTag = document.createElement("a");
    aTag.href = dataURI;
    aTag.setAttribute("download", "Code Gallery by 0xLeoDev");
    document.body.appendChild(aTag);
    aTag.click();
    aTag.remove();
  };

  return (
    <canvas ref={canvasRef01} />
    <button onClick={saveAsPng}>save as png</button>
  );

我的问题在我尝试使用子组件实现它时开始。

<Parent/>   //I need to have my "saveAsPng" function here
<Child/>    //I've my <canvas/> tag inside this child 

---

问题是如何从我的父组件访问（引用）我的画布数据以获取它的dataUrl？

---

我尝试使用定义为 dataURI 和 setDataURI 的钩子来解决它。带着将其作为道具传递的想法。但这个“解决方案”正在循环我的画布。

  const [dataURI, setDataURI] = useState(null);

  useEffect(() => {
    const canvas = canvasRef01.current;

    const dataURI = canvas.toDataURL("image / png");
    // setDataURI(dataURI);

    const context = canvas.getContext("2d");
    const width = canvas.width;
    const height = canvas.height;
    draw(context, canvas, width, height, numOfRec, bacgroundColor);
  }, [draw]);

  return (
    <canvas
      ref={canvasRef01}
      {...props}
    />
  );

Answer 1

在父组件中定义 ref 和

saveAsPng

方法，然后将 ref 传递给子组件。为了使其工作，您的子组件必须实现

forwardRef

。

您还需要将

saveAsPng

方法传递给该孩子。

const Parent = () => {
  const canvasRef01 = useRef(null);

  const saveAsPng = () => {
    const canvas = canvasRef01.current;
    const dataURI = canvas.toDataURL("image / png");

    const aTag = document.createElement("a");
    aTag.href = dataURI;
    aTag.setAttribute("download", "Code Gallery by 0xLeoDev");
    document.body.appendChild(aTag);
    aTag.click();
    aTag.remove();
  };

  return (
    <Child ref={canvasRef01} onButtonClick={saveAsPng}/>
  );
}

const Child = React.forwardRef(({ onButtonClick }, ref) => {
  return (
    <>
        <canvas ref={ref} />
        <button onClick={onButtonClick}>save as png</button>
    </>
  );
})