反应 useRef / useEffect HTMLCanvasElement 不可分配

Posted 2023-03-17

【中文标题】反应 useRef / useEffect HTMLCanvasElement 不可分配

【英文标题】：React useRef / useEffect HTMLCanvasElement not assignable

【发布时间】：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)

【参考方案1】：

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

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