React useRef / useEffect HTMLCanvasElement 不可分配

Question

我是 React 的新手，正在努力让 JS 对象通过 useRef 和 useEffect 呈现。

JS渲染方法如下：

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

使用模板渲染来自 chart.js 的图表我尝试通过 React 和打字稿来渲染它。

react render方法如下：

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 |字符串 | HTMLCanvas 元素，我尝试使用 React.MutableRefObject 和 getcontext("2d") 将其传递给它，但它在这行代码中表示图表 Canvas 出现以下错误: chartRef.current = 新指南针（图表Canvas，值）

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

抱歉，如果这是一个新手问题。

感谢您的支持。

克里斯托弗

Answer 1

您必须传递 canvas 本身，而不是它的上下文。使用 :

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

React useRef / useEffect HTMLCanvasElement 不可分配

React useRef / useEffect HTMLCanvasElement not assignable

javascript

typescript

reactjs

use-effect

use-ref