HTML Canvas，使用 React hooks 和 Typescript

Question

我试图使用 React hooks 和 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(); 
        }

    }

Answer 1

根据the documentationgetContext('2d')可以returnnull.

If the contextType doesn't match a possible drawing context, null is returned.

所以 const context 的类型可能为空。你可以很确定它不是，但你只需要检查一下。

if (canvasRef.current) {
  const context = canvas.getContext('2d');
  if (context) {
    // use context here.
  }
}

使用可选链接，您可以避免嵌套 if's，例如：

const context = canvasRef.current?.getContext('2d')
if (context) {
  // use context here.
}

Answer 2

这是因为getContext可以returnnull。文档：https://developer.mozilla.org/en-US/docs/Web/API/HTMLCanvasElement/getContext

If the contextType doesn't match a possible drawing context, null is returned.

修复

确保它不是 null 例如

        const context = canvas.getContext('2d');  
        if (context == null) throw new Error('Could not get context');
        // now safe

HTML Canvas，使用 React hooks 和 Typescript

HTML Canvas, with React hooks and Typescript

canvas

typescript

reactjs

react-hooks

use-effect

修复