小编Dav*_*uce的帖子

我试图使用 React hooks 和 Typescript 创建一个具有一些基本形状的画布元素，但我遇到了一个错误，其中 useEffect() 中的上下文可能为 null (ts2531)。

我假设这是因为我的 canvasRef 默认为 null，但我有点不确定我还可以将其设置为什么，或者是否有更好的方法来解决这个问题？

这是到目前为止我的代码（编辑，解决方案如下）：

import React, { useRef, useEffect } from 'react';

interface CanvasProps {
    width: number;
    height: number;
}

const Canvas = ({ width, height }: CanvasProps) => {
    const canvasRef = useRef<HTMLCanvasElement>(null);

    useEffect(() => {
        if (canvasRef.current) {
            const canvas = canvasRef.current;
            const context = canvas.getContext('2d');  
            context.beginPath();
+           context.arc(50, 50, 50, 0, 2 * Math.PI);
+           context.fill(); 
        }       
    },[]);

    return <canvas ref={canvasRef} height={height} width={width} />;
};

Canvas.defaultProps …