Canvas .tsx - 对象可能为“null”并且属性“getContext”在类型“never”上不存在

Question

我正在尝试创建一个可以放置在我的应用程序中的画布组件。

最终我会做到这一点，以便用户可以在上面绘图。

错误在这一行：

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

对象可能为“空”

如果我把它改成：

const context = canvas?.getContext("2d");

我得到：

属性“getContext”在类型“never”上不存在

这是该组件的完整代码：

const Canvas = (props: CanvasProps) => {
  const canvasRef = useRef(null);

  useEffect(() => {
    const canvas = canvasRef.current;
    const context = canvas.getContext("2d");
    //Our first draw
    context.fillStyle = "#000000";
    context.fillRect(0, 0, context.canvas.width, context.canvas.height);
  }, []);

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

export default Canvas;

Answer 1

我尝试了几次，得到了这个解决方案：

const Canvas = (props: CanvasProps) => {
  const canvasRef = useRef<HTMLCanvasElement>(null);

  useEffect(() => {
    const canvas = canvasRef.current;
    if (canvas == null) return; // current may be null
    const context = canvas.getContext("2d");
    if (context == null) return; // context may be null
    //Our first draw
    context.fillStyle = "#000000";
    context.fillRect(0, 0, context.canvas.width, context.canvas.height);
  }, []);

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

export default Canvas;

首先，用来useRef<HTMLCanvasElement>(null)让TS知道useRef获取一个HTML Canvas Element

根据React useRef文档，useRef()结果在渲染之前为null，因此我们添加if (canvas == null) return;以避免它为null；

根据getContext() 文档，结果可能为 null，所以我们添加if (context == null) return;

可执行代码在这里