react在ts中提示ref问题
发表于|更新于
|浏览量:
不要太在乎一些人,越在乎,越卑微。——周国平
首先按照官方文档的demo写好代码,却报错如下:

安装插件Error Lens后:

如何解决?
前往Text的ref源码,可以看到是需要一个叫LegacyRef的类型

我们进LegacyRef,看到其就是Ref或string的类型

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

这里出现了新的问题,不能将MutableRefObject<Text | null |undefined>分配给Ref<Text>
我们进入useRef源码,看到其包含几个重载

分别查看MuteableRefObject和RefObject

可以看到RefObject是Ref中容许的其中一种类型

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

在原有代码React.useRef()中传入null
报错解决

同理,trRef一样

注意此处Ref<TextRef>内的泛型使用的是konva/lib/shapes/Text包下的Text,改名为TextRef
除了在定义变量左侧申明类型,在方法右侧也可以申明泛型,让编辑器自动推测

相关推荐
2025-05-02
vue-awesome-paginate
尽量在舒适的情况下工作。记住,身体的紧张会制造肩痛和精神疲劳。 —— 卡耐基 https://github.com/peshanghiwa/vue-awesome-paginate vue-awesome-paginate:Vue.js 3 的强大分页解决方案在 Web 应用开发中,分页是一个常见的功能,尤其是在处理大数据集时。vue-awesome-paginate 是一个专为 Vue.js 3 打造的分页库,它以简单、高效和灵活的特点,帮助开发者快速实现分页功能。 什么是 vue-awesome-paginate?vue-awesome-paginate 是一个开源库,旨在为 Vue.js 3 应用提供强大的分页解决方案。它具有高度的可定制性,支持多种分页样式,并且易于与现有项目集成。 核心特点: 简洁的 API:快速上手,减少开发时间。 高度可定制:支持样式和行为的全面定制。 轻量级:库体积小,性能优异。 Vue 3 支持:专为 Vue.js 3 设计,充分利用其功能特性。 使用场景vue-awesome-paginate 适用于以下场景: 数据表格分页在数据密...
2021-11-12
数组解构赋值
倘若A代表人生的成功,那么公式是:A =X+Y+Z。X是工作,Y是游戏,z是保持缄默。——(美)爱因斯坦 我们以前从一个数组中获取第一项,可能是如下写法: 12let list = [1,2,3]let i = list[0] 有了解构赋值,可以如下写法: 12let list = [1,2,3]let [i] = list 如果稍微复杂点,例如下面这样从对象中取出来数组: 12let ruben = {hobby:['anime']}let favorite = ruben.hobby[0] 就可以写成: 12let ruben = {hobby:['anime']}let {hobby:[favorite]} = ruben 如果再复杂点 123let ruben = {hobby:['anime']}let achao = {favorite:undefined}achao.favorite =...
2024-12-18
ARIA16
兴趣是最好的老师,其次是耻辱——胖子邓 ARIA16技术:使用aria-label增强Web可访问性 在现代Web开发中,可访问性(Accessibility)是提升用户体验的关键因素之一。尤其对于视障用户来说,屏幕阅读器依赖准确的页面结构和标签描述来解释内容。ARIA16是一种有效的技术,使用aria-label属性为无可见文本的元素提供描述性标签,从而增强Web的可访问性。 什么是ARIA16?ARIA16是W3C推荐的一项技术,旨在通过aria-label属性为交互式元素提供可访问性支持。aria-label允许开发者为没有可见文本的元素定义可读的描述信息,供屏幕阅读器使用。 使用场景 图标按钮:为只有图标的按钮添加描述性标签。 装饰性元素:为装饰性但可交互的元素提供语义化说明。 复杂控件:为动态生成或没有内嵌文本的控件提供可读内容。 如何使用ARIA16?实现ARIA16非常简单,只需在相关元素上添加aria-label属性并提供适当的描述文本。 示例代码以下是一个使用aria-label的图标按钮示例: 123456<button aria-label=&q...
2025-04-06
outline
只回忆过去是差劲的记忆。——卡罗尔 https://github.com/outline/outline https://www.getoutline.com/ Outline: 一个现代化的团队知识库项目概述Outline 是一个快速、协作的知识库,旨在帮助团队更高效地管理和分享知识。它基于 React 和 Node.js 构建,提供了一个现代化的界面和丰富的功能,支持团队内部的文档管理和协作。 关键功能 协作编辑:支持多用户同时编辑文档,实时同步变化。 文档嵌入:支持嵌入各种类型的媒体,如图片、视频、代码片段等。 版本控制:每次文档修改都会自动保存新版本,方便用户查看和恢复历史版本。 全文搜索:强大的全文搜索功能,快速定位所需文档内容。 权限管理:灵活的权限管理系统,确保文档安全。 项目活动最近发布最新发布的版本是 v0.82.0,包括以下主要改进: 提到文档时自动保持标题和图标同步。 编辑器嵌入内容现在可以垂直调整大小。 粘贴链接时有嵌入或链接的选项。 升级 Mermaid 图表到 v11。 粘贴远程图片时会自动上传到 Outline 存储。 新表格现在具有固定宽度...
2025-10-29
apache-shenyu处理discoveryType问题
人间不会有单纯的快乐,快乐总夹杂着烦恼和忧虑,人间也没有永远。——杨绛《我们仨》 pr如下: https://github.com/apache/shenyu-dashboard/pull/555 思路是首先找到对应的字段,然后找到字段来源,比如从哪个接口请求到的,这里找到了 src/routes/Plugin/Common/Selector.js的discoveryConfig.discoveryType,往上追踪找到其discoveryConfig是在src/routes/Plugin/Common/index.js里,通过下面的dispatch回调赋值 12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061626364656667686970717273747576777879808182838485868788899091929394959697989910010110210310410510610...
2023-06-05
js获取当前浏览器是否采用深色主题
荣誉在于劳动的双手。——达芬奇 代码如下: 1window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches 对应的mdn: https://developer.mozilla.org/zh-CN/docs/Web/API/Window/matchMedia

阿超
我的名字叫阿超 年龄25岁 家在北京市 职业是软件开发 每天最晚也会在八点前回家 不抽烟 酒浅尝辄止 晚上十二点上床 保证睡足八个小时 睡前写一篇博客 再做二十分钟俯卧撑暖身 然后再睡觉 基本能熟睡到天亮 像婴儿一样不留下任何疲劳和压力 就这样迎来第二天的早晨 健康检查结果也显示我很正常 我想说明我是一个不论何时都追求内心平稳的人 不拘泥于胜负 不纠结于烦恼 不树立使我夜不能寐的敌人 这就是我在这社会的生活态度
Follow Me公告
This is my Blog