我對 React 還很陌生，并且正在努力通過 useRef 和 useEffect 來獲取要呈現的 JS 物件。
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 |”型別的引數 HTMLCanvasElement'。“CanvasRenderingContext2D”型別缺少“HTMLCanvasElement”型別中的以下屬性：hieght 等
對不起，如果這是一個新手問題。
謝謝你的支持。
克里斯托弗
uj5u.com熱心網友回復：
您必須傳遞畫布本身，而不是其背景關系。利用 ：
chartRef.current = new Compass(canvasEl.current, value)
轉載請註明出處，本文鏈接：https://www.uj5u.com/qukuanlian/380171.html
標籤：javascript 反应 打字稿 使用效果 使用引用
上一篇：ReactJS：重置時的單選按鈕
下一篇：從零開始以太坊（三）