在 Canvas 上反应 useRef 得到 null 或 undefined答案

【问题标题】：React useRef on Canvas getting null or undefined在 Canvas 上反应 useRef 得到 null 或 undefined
【发布时间】：2022-06-17 23:28:56
【问题描述】：

我正在尝试引用画布 DOM 元素以使其宽度与其父元素相同，而不会弄乱画布的比例。这样做时，我收到 Uncaught TypeError: _canvasRef$current.getContext is not a function 错误，我不确定如何修复它。

我控制台记录了一些事情只是为了让应用程序运行，但问题出在useEffect

import SignaturePad from 'react-signature-canvas'

const canvasRef = useRef<HTMLCanvasElement>(null)

useEffect(() => {
    const ctx: CanvasRenderingContext2D | null | undefined =
        canvasRef.current?.getContext('2d')
    const ctxContainer = document.getElementById('ctxContainer')

    console.log('ctx: ', ctx)
    // if (ctx && ctxContainer) {
    //     ctx.style.width = '100%'
    //     ctx.style.height = '100%'
    //     ctx.width = ctxContainer.clientWidth
    // }
}, [])

const save = () => {
    console.log('saved!')
}

console.log('canvasRef: ', canvasRef)

return (
    <div id={`ctxContainer`} className={'signatureInput__option-draw'}>
        <SignaturePad
            ref={canvasRef}
            canvasProps={{
                className: 'signatureInput__option-draw__canvas',
            }}
            onEnd={save}
        />
    </div>
)

【问题讨论】：

提供SignaturePad 组件的定义可能很有用
import SignaturePad from 'react-signature-canvas'

标签： javascript reactjs