React中父组件访问子组件Canvas Ref以导出PNG的问题

问题背景 #

原本单组件内点击按钮可以正常把Canvas保存为PNG，但拆分后Canvas放在子组件<Child/>，保存按钮和逻辑在父组件<Parent/>，父组件无法直接获取子组件里的Canvas数据；尝试用useState传递dataURI时，还触发了Canvas的循环渲染问题。

可行解决方案：使用forwardRef + useImperativeHandle #

通过React的forwardRef让子组件接收父组件传递的ref，再用useImperativeHandle暴露指定的方法给父组件调用，这样父组件就能直接触发子组件内的Canvas数据获取逻辑，不会引发不必要的重渲染。

子组件代码（Child.jsx） #

import { forwardRef, useRef, useEffect, useImperativeHandle } from 'react';

const Child = forwardRef((props, ref) => {
  const canvasRef01 = useRef(null);

  // 暴露给父组件的方法
  useImperativeHandle(ref, () => ({
    getCanvasDataURL: () => {
      const canvas = canvasRef01.current;
      return canvas.toDataURL("image/png");
    }
  }));

  useEffect(() => {
    const canvas = canvasRef01.current;
    const context = canvas.getContext("2d");
    const width = canvas.width;
    const height = canvas.height;
    // 执行你的绘制逻辑
    props.draw(context, canvas, width, height, props.numOfRec, props.bacgroundColor);
  }, [props.draw, props.numOfRec, props.bacgroundColor]);

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

export default Child;

父组件代码（Parent.jsx） #

import { useRef } from 'react';
import Child from './Child';

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

  const saveAsPng = () => {
    // 调用子组件暴露的方法获取dataURL
    const dataURI = childCanvasRef.current.getCanvasDataURL();
    const aTag = document.createElement("a");
    aTag.href = dataURI;
    aTag.setAttribute("download", "Code Gallery by 0xLeoDev");
    document.body.appendChild(aTag);
    aTag.click();
    aTag.remove();
  };

  // 假设你的绘制函数和相关参数
  const draw = (context, canvas, width, height) => {
    context.fillStyle = 'lightblue';
    context.fillRect(0, 0, width, height);
    // 其他绘制逻辑...
  };

  return (
    <>
      <Child 
        ref={childCanvasRef} 
        draw={draw} 
        numOfRec={5} 
        bacgroundColor="#fff" 
        width={500} 
        height={300} 
      />
      <button onClick={saveAsPng}>save as png</button>
    </>
  );
};

export default Parent;

为什么之前的useState方案会触发循环渲染？ #

你之前在子组件的useEffect里调用setDataURI(dataURI)，这会更新父组件的state，导致父组件重渲染，进而子组件也会重渲染；如果draw函数是在父组件每次渲染时重新创建的（比如直接写在组件内部没有用useCallback包裹），子组件的useEffect依赖draw，重渲染后draw引用变化，会再次触发useEffect，再次调用setDataURI，形成循环。

而用forwardRef+useImperativeHandle的方案，只有在点击保存按钮时才会主动调用子组件的方法获取数据，不会触发不必要的重渲染，完美解决这个问题。

内容的提问来源于stack exchange，提问作者Leo