使用 useRef 時需要 typescript 的模式

Question

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”不可分配給類型“RefObject”。 “當前”屬性類型不兼容。 類型“HTMLInputElement”缺少類型“HTMLCanvasElement”的以下屬性：captureStream、getContext、toBlob、toDataURL

Answer 1

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

嘗試這個。