属性'getTrimmedCanvas'在类型"{}".ts(2339)上不存在，签名板

Question

我正试图在我的应用程序中实现一个函数，以便用户可以签署PDF。我在CodeSandbox上发现了一个签名板的例子，我试图将其插入到我的项目中，但我遇到了两个错误：

Property 'getTrimmedCanvas' does not exist on type '{}'.ts(2339)
Property 'clear' does not exist on type '{}'.ts(2339)

代码源签名板示例

有错误的代码部分

import Popup from "reactjs-popup";
import SignaturePad from "react-signature-canvas";
import { useState, useRef } from "react";
import React from "react";
function Button() {
const sigCanvas = useRef({});
const [imageURL, setImageURL] = useState(null);
const clear = () => sigCanvas.current.clear();
const save = () =>setImageURL(sigCanvas.current.getTrimmedCanvas().toDataURL("image/png"));
return (
//for more Code use the Link: Codesource Signature Pad example
);
}
export default Button;

我已经安装了这两个库：

npm install --save reactjs-popup
npm install --save react-signature-canvas

知道怎么修理它们吗？感谢

Answer 1

我解决了这个问题，在useRef:中添加了一个类型

const sigCanvas = useRef<any>();

Answer 2

使用.tsx文件非常简单，这就是导致问题的原因。只需将文件类型从tsx更改为.js或.jsx即可：(

Answer 3

我刚刚使用了react-signature-canvas，这对我的有效

包装上.json

"@types/react-signature-canvas": "^1.0.2",
"react-signature-canvas": "^1.0.6",

组件上

import React, { useRef } from 'react';
import SignatureCanvas from 'react-signature-canvas';
const signaturePadRef: React.MutableRefObject<SignatureCanvas> = useRef(null);
return (
<SignatureCanvas
ref={(ref) => {
signaturePadRef.current = ref;
}}
/>
);