如何在React中当父组件fileUrl更新时触发子组件的Canvas绘图方法？

问题背景 #

父组件通过props将fileUrl传递给子组件ImagePreview，当fileUrl更新时，需要自动调用子组件的绘制逻辑在canvas中渲染对应图片。

现有代码 #

父组件代码

const TopPage = (props) =>{
    const [fileUrl, setFileUrl ] = useState("");
    const onSetFileUrl = (data) =>{
        setFileUrl(data);
    }
    return (
        <div>
            <ImagePreview fileUrl={fileUrl}></ImagePreview>
        </div>
    );    
}

子组件代码

import React from 'react'
const ImagePreview = (props) =>{
    const layer = null;
    const onImageChange = () =>{
        var layer = document.getElementById('layer');
        var ctx = layer.getContext('2d');
        console.log("image is changed");
        const chara = new Image();
        chara.src = props.fileUrl;
        chara.onload = () => {
            ctx.drawImage(chara, 0, 0);          
        };
    }
    return (<div>Image Preview:{props.fileUrl}
   <canvas id="layer" style={{width: 100, height: 100,backgroundColor:"yellow"}} />
    </div>);
};

export default ImagePreview;

实现方案 #

推荐两种可靠的实现方式，优先选择方案一：

方案一：用useEffect监听fileUrl变化（最符合React数据流）

利用React的useEffect钩子监听props.fileUrl的更新，自动触发绘制逻辑，同时用useRef替代DOM查询获取canvas元素，更符合React组件范式：

import React, { useEffect, useRef } from 'react'
const ImagePreview = (props) =>{
    const canvasRef = useRef(null);

    const drawImage = () =>{
        // 边界判断：避免canvas未挂载或fileUrl为空时报错
        if (!canvasRef.current || !props.fileUrl) return;
        
        const ctx = canvasRef.current.getContext('2d');
        console.log("image is changed");
        
        const chara = new Image();
        chara.src = props.fileUrl;
        
        chara.onload = () => {
            // 清除画布旧内容，避免图片叠加
            ctx.clearRect(0, 0, canvasRef.current.width, canvasRef.current.height);
            ctx.drawImage(chara, 0, 0);          
        };
        
        // 处理图片加载失败的情况
        chara.onerror = () => {
            console.error('图片加载失败，请检查地址');
        };
    }

    // 仅当fileUrl变化时执行绘制
    useEffect(() => {
        drawImage();
    }, [props.fileUrl]);

    return (
        <div>
            Image Preview:{props.fileUrl}
            <canvas 
                ref={canvasRef} 
                style={{width: 100, height: 100, backgroundColor:"yellow"}} 
                width={100} height={100} // 设置canvas实际宽高，避免绘制拉伸
            />
        </div>
    );
};

export default ImagePreview;

说明：

• useRef直接绑定canvas元素，避免全局DOM查询，更高效且封装性更好。
• 依赖数组中传入props.fileUrl，确保只有当fileUrl更新时才触发绘制。
• 添加边界判断和错误处理，提升组件稳定性。
• 补充canvas的width/height属性，解决仅用style设置宽高导致的图片拉伸问题。

方案二：父组件主动触发子组件方法（适用于需手动控制场景）

通过useImperativeHandle暴露子组件的绘制方法，父组件可主动调用：

子组件修改：

import React, { useRef, useImperativeHandle, forwardRef } from 'react'
const ImagePreview = forwardRef((props, ref) =>{
    const canvasRef = useRef(null);

    const drawImage = () =>{
        if (!canvasRef.current || !props.fileUrl) return;
        const ctx = canvasRef.current.getContext('2d');
        console.log("image is changed");
        const chara = new Image();
        chara.src = props.fileUrl;
        chara.onload = () => {
            ctx.clearRect(0, 0, canvasRef.current.width, canvasRef.current.height);
            ctx.drawImage(chara, 0, 0);          
        };
    }

    // 向父组件暴露drawImage方法
    useImperativeHandle(ref, () => ({
        drawImage
    }));

    return (
        <div>
            Image Preview:{props.fileUrl}
            <canvas 
                ref={canvasRef} 
                style={{width: 100, height: 100, backgroundColor:"yellow"}} 
                width={100} height={100}
            />
        </div>
    );
});

export default ImagePreview;

父组件修改：

import { useRef, useEffect } from 'react';
const TopPage = (props) =>{
    const [fileUrl, setFileUrl ] = useState("");
    const imagePreviewRef = useRef(null);

    const onSetFileUrl = (data) =>{
        setFileUrl(data);
    }

    // fileUrl更新后调用子组件方法
    useEffect(() => {
        imagePreviewRef.current?.drawImage();
    }, [fileUrl]);

    return (
        <div>
            <ImagePreview ref={imagePreviewRef} fileUrl={fileUrl}></ImagePreview>
        </div>
    );    
}

说明：这种方式适合需要父组件手动控制绘制时机的场景，但一般优先推荐方案一，更符合React单向数据流的设计理念。

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