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

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

相关文章
|
6月前
|
前端开发 JavaScript API
第八章 react组件实例中三大属性之ref
第八章 react组件实例中三大属性之ref
|
6月前
|
人工智能 JSON 前端开发
react17+ts 学习
react17+ts 学习
|
6月前
|
前端开发
vue+ts或者react+ts如何使用animate.css
vue+ts或者react+ts如何使用animate.css
87 0
|
2月前
|
前端开发 JavaScript
学习react基础(3)_setState、state、jsx、使用ref的几种形式
本文探讨了React中this.setState和this.state的区别,以及React的核心概念,包括核心库的使用、JSX语法、类与函数组件的区别、事件处理和ref的使用。
51 3
学习react基础(3)_setState、state、jsx、使用ref的几种形式
|
2月前
|
JavaScript 前端开发 开发者
React 的正确使用方法:ref 篇
你真的用对了 useRef 吗?在与 TypeScript 一起使用、以及撰写组件库的情况下,你的写法能够避开以下所有场景的坑吗?
|
3月前
|
前端开发
React使用useRef ts 报错
【8月更文挑战第17天】
62 4
|
2月前
|
资源调度 JavaScript 前端开发
使用vite+react+ts+Ant Design开发后台管理项目(二)
使用vite+react+ts+Ant Design开发后台管理项目(二)
|
2月前
|
前端开发
react学习(17)回调形式的ref
react学习(17)回调形式的ref
|
2月前
|
存储 前端开发 容器
react学习(18)createRef形式的ref
react学习(18)createRef形式的ref
|
3月前
|
前端开发 C++
使用 Vite 创建 React+TS+SW 项目并整合 AntDesign 、Scss 等组件或插件
本文记录了如何使用Vite创建一个React+TypeScript+Service Workers(SW)项目,并整合AntDesign组件库和Scss等插件,包括项目的创建、配置问题解决、AntDesign和Scss的整合方法。
191 1