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
除了在定义变量左侧申明类型,在方法右侧也可以申明泛型,让编辑器自动推测

相关推荐
2024-10-06
vitesse-webext
知古不知今,谓之落沉。知今不知古,谓之盲瞽。——王充 分享一个由 Vite 提供支持的 WebExtension(Chrome、FireFox 等浏览器插件)的入门模板。 Github: https://github.com/antfu-collective/vitesse-webext 特性: ⚡️ Instant HMR - 在 dev 上使用 Vite(不再刷新! 🥝 Vue 3 - 组合式 API、<script 设置> 语法等等! 💬 轻松通信 - 由 webext-bridge 和 Vue使用存储提供支持 🌈 UnoCSS - 即时按需原子 CSS 引擎。 🦾 TypeScript - 类型安全 📦 组件自动导入 🌟 图标 - 直接从任何图标集中访问图标 🖥 内容脚本 - 即使在内容脚本中也可以使用 Vue 🌍 WebExtension - Chrome、Firefox 等的同构扩展 📃 具有完整类型支持的动态manifest.json 使用模板GitHub 模板Create a repo from this template o...
2025-08-26
fabricjs
没有比脚更长的路,没有比人更高的山。――汪国真《山高路远》 Fabric.js:浏览器里的 Canvas 超级引擎 —— 让前端图形开发极致自由在现代网页开发中,图形和可视化已成为用户体验的关键一环。无论是在线图片编辑、白板、流程图、交互动画,还是数据可视化,HTML5 Canvas 都是前端开发者的“画布”。但原生 Canvas API 虽强,却略显底层、开发门槛高。你是否想在浏览器里拥有类似 Photoshop、PowerPoint 的自由拖拽、变形、分组、交互体验?如果答案是 YES,那你不能错过 Fabric.js —— 这个让前端图形开发“飞起来”的开源超级引擎! 一、项目简介Fabric.js 是一个功能强大的 Javascript Canvas 库,专为现代浏览器设计,能让开发者用极少代码实现复杂的图形对象创建、编辑、管理与交互。它不仅支持 Canvas 的全部绘图能力,还提供了对象化管理、序列化、事件监听、自由变形等高级功能,成为前端图形应用的“事实标准”。 项目地址:https://github.com/fabricjs/fabric.js 官网演示:h...
2025-06-16
mermaid-live-editor
教学的艺术不在于传授本领,而在于关于激励、唤醒、鼓舞。——第斯多惠 https://github.com/mermaidjs/mermaid-live-editor Mermaid Live Editor:在线绘制和分享流程图、时序图的神器在日常开发、产品设计和文档编写中,流程图、时序图、甘特图等可视化图形是表达系统逻辑、业务流程和协作方案的利器。Mermaid 作为一款流行的文本化图形描述工具,在开发者和技术团队中拥有极高的口碑。而 @mermaidjs/mermaid-live-editor 正是将 Mermaid 的强大能力带到了浏览器,让你即开即用、即写即画。 什么是 Mermaid Live Editor?Mermaid Live Editor 是一个基于浏览器的在线编辑器,专门用于编写和实时渲染 Mermaid 语法的各种图表。你只需要用简单的 Markdown 风格文本描述图表结构,编辑器即可自动渲染为可视化图形,并且支持导出、分享、预览等便捷操作。 主要特性1. 实时预览与高亮 左侧输入 Mermaid 语法,右侧实时渲染对应图形。 支持语法高亮...
2025-06-06
videojs
人的教养不能够靠别人传授,人必须进行自我修养。一切苦修也绝不是文化修养,教育是通过人的主动性来实现的,教育牢牢地钉在主动性上。——费希特 https://github.com/videojs/video.js https://videojs.com/ Video.js:强大的开源 HTML5 视频播放器在现代 Web 开发中,视频已经成为内容交互的重要组成部分。从媒体网站到教育平台,视频播放器的选择直接影响用户体验。对于开发者来说,一个强大、灵活且易于定制的视频播放器至关重要。 Video.js 是一个开源的 HTML5 视频播放器,拥有强大的功能、广泛的插件支持,以及全面的浏览器和设备兼容性。它是开发者在构建视频播放功能时的理想选择。 什么是 Video.js?Video.js 是一个基于 HTML5 的视频播放器,它支持现代浏览器和设备,同时提供对旧版浏览器的回退支持(如 Flash)。它的设计目标是为开发者提供一个轻量级、可扩展且功能强大的视频播放解决方案。 核心特性1. 广泛的格式支持Video.js 支持所有常见的视频格式,包括 MP4、WebM 和 HLS 等...
2025-06-04
wave-ui
教育上的错误比别的错误更不可侵犯。教育上的错误正和错配了药一样,第一次弄错了,决不能借第二第三次去补救,它们的影响是终身洗不掉的。——约翰·洛克 https://github.com/antoniandre/wave-ui https://antoniandre.github.io/wave-ui/ Wave UI:基于 Vue 的现代化 UI 框架在构建现代化的 Web 应用时,一个优秀的 UI 框架不仅能够加快开发速度,还能显著提升用户体验。对于使用 Vue 的开发者而言,Wave UI 是一个轻量级、功能丰富的选择。 Wave UI 是一个基于 Vue 的 UI 框架,专注于提供高质量的组件和工具,同时保持轻量化和易用性。通过 Wave UI,开发者可以快速构建美观且功能强大的 Web 应用。 为什么选择 Wave UI?1. 轻量化和高性能Wave UI 的核心目标是轻量化,整个框架大小不到 40 KB。这让它在加载速度和性能上表现优异,非常适合构建快速响应的应用。 2. 易用性Wave UI 提供了直观的 API 和简单的配置选项,让开发者能够快速上手。即使是初学...
2022-12-22
css is选择器
良药苦口利于病,忠言逆耳利于行——佚名 MDN:https://developer.mozilla.org/zh-CN/docs/Web/CSS/:is is选择器可以同时包含多个,例如 12345678910111213/* 选择 header、main、footer 里的任意一个悬浮状态的段落 */:is(header, main, footer) p:hover { color: red; cursor: pointer;}/* 以上内容相当于以下内容 */header p:hover,main p:hover,footer p:hover { color: red; cursor: pointer;} 非常实用

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