Javascript 在React with TypeScript中使用正确的引用模式时，Refs是空对象{}

问题:

我试着用react cropper在TypeScript中的工作做一个例子。该示例在.JSX中运行良好，并且有打字功能，因此我认为只要对.JSX代码进行一些更改，它就可以正常工作

其中一件棘手的事情是TypeScript和React中的引用模式。然而，我发现这令人惊讶，我已经按照它来设置一切

预期：

ref模式将按预期工作，并且我可以从对象访问底层函数

也就是说，我希望看到this.cropRef可以访问react cropper中定义的getCroppedCanvas

实际：

console.logcropimage函数中的这个表示refs是空的，尽管我遵循上面的示例

尝试使用现在已弃用的使用字符串的ref模式，可以看出它在cropImage函数中有引用标题。但是，因为TS是强类型的，所以我无法访问getCroppedCanvas

代码：

node_modules/react crapper/package.json：

{
    "name": "@types/react-cropper",
    "dependencies": {
    }
}

---

看起来您使用的是回调模式和重新对象模式的奇怪组合。如果要使用重新对象，只需将重新对象作为ref属性传递，即：

ref={this.cropRef}

如果要使用回调，则声明应为：

private cropRef : Cropper;

---

您可能会使用这个.cropRef.getcropedcanvas而不是这个.cropRef.current.getcropedcanvas。

我也是这么想的，但我这样做的时候，基本上到处都会出错。如果使用REOBJECT模式，我的代码将在此.croppref.getCroppedCanvas上中断，因为该方法不存在于类型REOBJECT和CROPER元素中的我的ref上。这是因为重新对象缺少诸如“对齐”之类的属性。这是错误类型“ReactCropper”的一部分，不可分配给类型“HTMLImageElement”。类型“ReactCropper”中缺少属性“align”。如果使用的是重新对象模式，则应保持当前值，以便在this.cropRef.current.getCroppedCanvas中取消对重新对象的引用。您在尝试哪种方式？使用我正在使用的REBOJECT模式current，它解决了access转到getCroppedCanvas的问题。但是，我无法在元素上设置引用。是否使用ref={this.cropRef}？您遇到了什么错误？最后我自己尝试了这个方法，看起来react-cropper的类型定义中有一个错误：react.HTMLProps应该替换为react.AllHTMLAttributes。可以使用在本地修改类型定义。

{
    "name": "@types/react-cropper",
    "dependencies": {
    }
}

ref={this.cropRef}

private cropRef : Cropper;