react在ts中提示ref问题

简介: react在ts中提示ref问题

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

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

安装插件Error Lens后:

如何解决?

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

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

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

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

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

分别查看MuteableRefObjectRefObject

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

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

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

报错解决

image-20220616131847569.png

同理,trRef一样

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

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

相关文章
|
2天前
|
前端开发
vue+ts或者react+ts如何使用animate.css
vue+ts或者react+ts如何使用animate.css
34 0
|
2天前
|
前端开发 JavaScript API
第八章 react组件实例中三大属性之ref
第八章 react组件实例中三大属性之ref
|
2天前
|
前端开发 JavaScript
深入了解 React 中的 Ref:不是魔法,是超级工具
深入了解 React 中的 Ref:不是魔法,是超级工具
|
2天前
|
JavaScript 前端开发 Java
React 中的 ref 和 refs:解锁更多可能性(下)
React 中的 ref 和 refs:解锁更多可能性(下)
React 中的 ref 和 refs:解锁更多可能性(下)
|
2天前
|
JavaScript 前端开发 测试技术
React 中的 ref 和 refs:解锁更多可能性(上)
React 中的 ref 和 refs:解锁更多可能性(上)
React 中的 ref 和 refs:解锁更多可能性(上)
|
2天前
|
前端开发 JavaScript
React 配置别名 @ ( js/ts 项目中通过 webpack.config.js 配置)
React 配置别名 @ ( js/ts 项目中通过 webpack.config.js 配置)
47 0
|
2天前
|
JavaScript 前端开发
React 创建 js 与 ts 项目
React 创建 js 与 ts 项目
28 0
|
6月前
|
前端开发 JavaScript
React基础语法08-点击按钮,获取input框的值(通过ref来获取)
React基础语法08-点击按钮,获取input框的值(通过ref来获取)
120 0
|
7月前
|
JavaScript 前端开发
React-组件-Ref转发
React-组件-Ref转发
27 0
|
7月前
|
前端开发
React-组件-Ref
React-组件-Ref
33 0

热门文章

最新文章