Reactjs 打字稿：'；getContext'；不存在于类型'；重新对象<；HTMLCanvasElement>'；

我试图使用useRef获得画布的引用，但typescript正在抱怨

import React, { useRef } from 'react';
const AddPhoto: React.FC = () => {
  const canvas = useRef<HTMLCanvasElement>(null);
  const ctx: CanvasRenderingContext2D = canvas.getContext('2d')!;
//                                                 ^ error
}
  return (
      <canvas
          ref={canvas}
          width={315}
          height={315}
     />
)

错误现在是错误的

Type 'CanvasRenderingContext2D | null' is not assignable to type 'CanvasRenderingContext2D'.
  Type 'null' is not assignable to type 'CanvasRenderingContext2D'.ts(2322)

---

当您使用

useRef

时，您的值不仅存储在

canvas

变量中，而且存储在

canvas.current

中，因此您应该使用

canvas.current.getContext（'2d'）

---

若要解决类型问题，请在（…）{…}

const ctx: CanvasRenderingContext2D | null = canvas.current ? canvas.current.getContext('2d') : null;

---

或者使用：

canvas.current？.getContext（'2d'）

，这样可以省略三元。如果要对三元进行编码，则必须使用

const ctx:canvasrendingcontext2d | null | undefined=canvas.current？.getContext（'2d'）

尝试：

Type 'CanvasRenderingContext2D | null' is not assignable to type 'CanvasRenderingContext2D'.
  Type 'null' is not assignable to type 'CanvasRenderingContext2D'.ts(2322)

const ctx: CanvasRenderingContext2D | null = canvas.current ? canvas.current.getContext('2d') : null;