React中不使用useEffect Hook获取HTML Canvas getContext()的方法

首先明确问题根源：组件首次渲染时，JSX还未挂载到DOM节点，canvasRef.current此时自然为null，直接在组件顶层调用getContext()必然报错。以下是两种无需依赖useEffect的可行方案：

方案1：使用回调Ref #

回调Ref会在DOM元素挂载/卸载时自动触发，我们可以直接在回调逻辑里获取Canvas上下文并完成初始化，时机精准且逻辑紧凑：

import React, { useRef } from 'react';
import './App.css'

const Canvas = () => {
    const contextRef = useRef(null);

    // 回调Ref：canvas挂载到DOM时执行初始化，卸载时清理资源
    const handleCanvasRef = (element) => {
        if (element) {
            const context = element.getContext("2d");
            contextRef.current = context;
            // 这里可直接编写Canvas初始化逻辑
            context.fillStyle = '#ff4444';
            context.fillRect(20, 20, 60, 60);
        } else {
            contextRef.current = null;
        }
    };

    return (
        <canvas id="myCanvas" ref={handleCanvasRef}></canvas>
    );
};

export default Canvas;

方案2：延迟获取上下文到具体操作时机 #

如果你的Canvas操作不需要在组件挂载时立即执行，可以将获取上下文的逻辑封装到具体的操作函数中，配合容错判断避免报错：

import React, { useRef } from 'react';
import './App.css'

const Canvas = () => {
    const canvasRef = useRef(null);

    const drawShape = () => {
        const canvas = canvasRef.current;
        if (!canvas) return; // 容错：确保canvas已挂载
        const context = canvas.getContext("2d");
        context.fillStyle = '#4488ff';
        context.fillRect(100, 100, 60, 60);
    };

    return (
        <>
            <canvas id="myCanvas" ref={canvasRef}></canvas>
            <button onClick={drawShape}>绘制图形</button>
        </>
    );
};

export default Canvas;

补充：原生JS代码的小问题 #

你提供的原生JS代码存在语法错误：document.getElementById("#myCanvas")不需要加#，正确写法为：

const canvas = document.getElementById("myCanvas");
const context = canvas.getContext("2d");

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