不要太在乎一些人,越在乎,越卑微。——周国平

首先按照官方文档的demo写好代码,却报错如下:

image-20220616130732782

安装插件Error Lens后:

image-20220616130416141

如何解决?

前往Textref源码,可以看到是需要一个叫LegacyRef的类型

image-20220616131033822

我们进LegacyRef,看到其就是Refstring的类型

image-20220616131134570

因此这里我们定义为Ref类型即可

image-20220616131228231

这里出现了新的问题,不能将MutableRefObject<Text | null |undefined>分配给Ref<Text>

我们进入useRef源码,看到其包含几个重载

image-20220616131355690

分别查看MuteableRefObjectRefObject

image-20220616131558832

可以看到RefObjectRef中容许的其中一种类型

image-20220616131733093

所以应该使用上面一种重载

image-20220616131807973

在原有代码React.useRef()中传入null

报错解决

image-20220616131847569

同理,trRef一样

image-20220616131948951

注意此处Ref<TextRef>内的泛型使用的是konva/lib/shapes/Text包下的Text,改名为TextRef

除了在定义变量左侧申明类型,在方法右侧也可以申明泛型,让编辑器自动推测

image-20220616132252642