使用 useRef 时需要打字稿的模式答案

【问题标题】：Need pattern for typescript when use useRef使用 useRef 时需要打字稿的模式
【发布时间】：2021-09-24 05:59:33
【问题描述】：

const CanvasMap = () => {
      const canvasFef = React.useRef<HTMLInputElement>(null)
      useEffect(() => {
        canvasFef && canvasFef.current && cities.forEach(function (item) {
             // logic here
        })
      }, [canvasFef]);
      return (
          <canvas id="canvas"
                  ref={canvasFef}
          ></canvas>
      )
    };

我有错误

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

TS2322：类型“MutableRefObject”不可分配给输入“LegacyRef”。类型 'MutableRefObject' 不可分配给类型 '参考对象'。属性“当前”的类型不兼容。 “HTMLInputElement”类型缺少“HTMLCanvasElement”类型的以下属性：captureStream、getContext、toBlob、toDataURL

【问题讨论】：

标签： javascript reactjs typescript

【解决方案1】：

const canvasFef = React.useRef<HTMLCanvasElement | null>(null);

试试这个。

【讨论】：