反应 useRef / useEffect HTMLCanvasElement 不可分配答案

【问题标题】：React useRef / useEffect HTMLCanvasElement not assignable反应 useRef / useEffect HTMLCanvasElement 不可分配
【发布时间】：2022-01-16 20:46:42
【问题描述】：

我对 React 还很陌生，并且正在努力让 JS 对象通过 useRef 和 useEffect 呈现。

JS渲染方法如下：

import { Compass } from "steelseries";
const compass = new Compass(document.querySelector("#myCanvas"), {
  size: 200
});

使用模板从 chart.js 渲染图表我尝试通过 React 和 typescript 渲染它。

react 渲染方法如下：

import { useCallback, useEffect, useRef } from "react"
import { observer } from "mobx-react"
import { Compass } from "steelseries"

type GaugeIndicatorProps = {
      value: 200
    }

export const Gauge = observer(({ value }: GaugeIndicatorProps) => {
      const canvasEl = useRef() as React.MutableRefObject<HTMLCanvasElement>
      const chartRef = useRef<Compass | null>()
      
      const createChart = useCallback(() => {
        const chartCanvas = canvasEl.current.getContext("2d")
        if (!chartCanvas) {
          return
        }
        chartRef.current = new Compass(chartCanvas, value)
      }, [value])

      useEffect(() => {
        if (!chartRef.current) {
          createChart()
        }
      }, [createChart])
    
      return (
        <div className={`canvas`}>
          <canvas className="top-chart" ref={canvasEl} />
        </div>
      )
    })

不确定如何渲染它，因为指南针对象需要一个 Canvas |字符串 | HTMLCanvasElement，我曾尝试使用 React.MutableRefObject 和 getcontext("2d") 将其传递给它，但它在这行代码中表示 chartCanvas 出现以下错误： chartRef.current = new Compass(chartCanvas, value)

'CanvasRenderingContext2D' 类型的参数不能分配给'string | 类型的参数HTMLCanvas 元素”。 “CanvasRenderingContext2D”类型缺少“HTMLCanvasElement”类型的以下属性：hieght 等

对不起，如果这是一个新手问题。

感谢您的支持。

克里斯托弗

【问题讨论】：

最好使用const canvasEl = useRef<HTMLCanvasElement>(null)

标签： javascript reactjs typescript use-effect use-ref

【解决方案1】：

您必须传递画布本身，而不是其上下文。使用：

chartRef.current = new Compass(canvasEl.current, value)

【讨论】：