<分区>
我试图使用 React 钩子(Hook)和 Typescript 创建一个具有一些基本形状的 Canvas 元素，但我遇到了一个错误，其中 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 = {
width: window.innerWidth,
height: window.innerHeight
};
export default Canvas;
根据 Alex Wayne 的快速回答，这是我更新后的 useEffect()，它可以正常工作。
useEffect(() => {
if (canvasRef.current) {
const canvas = canvasRef.current;
const context = canvas.getContext('2d');
if (context) {
context.beginPath();
context.arc(50, 50, 50, 0, 2 * Math.PI);
context.fill();
}
}