Question

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

2022-06-12

2174

reactjs canvas next.js

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

最终我会让用户可以在其上绘图。

错误出现在此行：

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

对象可能为“null”

如果我将其更改为：

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;

可执行代码为这里