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-11-22
playcanvas-engine
生活就像一盒巧克力,你永远不知道下一颗是什么味道。——阿甘·弗雷斯 PlayCanvas Engine 深度观察:在浏览器原生跑起来的开放式 3D/WebXR/WebGPU 游戏引擎 仓库地址:playcanvas/engine描述:Powerful web graphics runtime built on WebGL, WebGPU, WebXR and glTF官网:PlayCanvas 网站 | 用户手册 | API Reference | 在线示例 | 官方博客(这些入口均在 README 顶部有导航)许可证:MIT语言:JavaScript / TypeScript(脚本可二选一)核心技术关键字(源自仓库 Topics):webgl webgl2 webgpu webxr gltf game-engine gaussian-splatting 等 PlayCanvas Engine 是一个完全开源、浏览器原生运行的实时 3D / 游戏 / 交互内容引擎。它的定位并不是“另一个封装层”,而是一套将现代 W...
2023-09-11
css画一个圈带一条线
深窥自己的心,而后发觉一切的奇迹在你自己。——培根 用到的是css的background属性和radial-gradient 12345678910111213141516/** 淡蓝渲染到20px * 白色渲染到20px(分割线 * 白色渲染到21px(分割线 * 淡蓝渲染到21px * 淡蓝渲染到40px * 后续白色打底 */background: radial-gradient( circle at center, #f6faff 20px, #fff 20px, #fff 21px, #f6faff 21px, #f6faff 40px, #fff 0); 效果: .ruben{ background: radial-gradient( circle at center, #f6faff 20px, #fff 20px, #fff 21px, #f6faff 21px, #f6faff 40px...
2023-09-21
js1k
兼听则明,偏信则暗。——魏徽 昨天分享了 aem1k 今天是js1k https://js1k.com/ 其中有很多有趣的代码 https://js1k.com/2019-x/ 例如这个吃豆人: https://js1k.com/2019-x/demo/4122 代码: https://js1k.com/2019-x/details/4122 效果:
2023-06-21
hexo-bilibili-bangumi
练习是良好的老师。——贺拉斯 分享一个hexo插件: https://github.com/HCLonely/hexo-bilibili-bangumi hexo 番剧页面插件,可选数据源:Bilibili, Bangumi Demo 安装 1$ npm install hexo-bilibili-bangumi --save 配置 将下面的配置写入站点的配置文件 _config.yml 里(不是主题的配置文件). 12345678910111213141516171819202122232425262728293031323334353637383940414243bangumi: # 追番设置 enable: true source: bili bgmInfoSource: 'bgmApi' path: vmid: title: '追番列表' quote: '生命不息,追番不止!' show: 1 lazyload: true srcValue: '__image__'...
2026-09-30
cypress
盛年不重来,一日难再晨。及时宜自勉,岁月不待人。——陶渊明 Cypress:当浏览器里的测试,终于跟上 Web 的进化项目地址:https://github.com/cypress-io/cypress Web 一直在变化。 页面不再只是静态文档,交互越来越密集,界面状态越来越丰富,浏览器里的每一次点击、输入、跳转与渲染,都可能牵动一段真实的业务流程。测试也不能再停留在遥远的外围,隔着一层层抽象猜测浏览器里究竟发生了什么。 Cypress 的态度很直接: Web 已经进化,测试也终于该进化了。 它是一套面向一切运行在浏览器中的内容而打造的测试工具,强调快速、易用与可靠。它不把测试描述成一项沉重的附属工作,而是让测试走进日常开发节奏,成为浏览器应用构建过程中的自然一环。 测试,不该总是最后才出现一个浏览器应用从来不只是代码文件的集合。 它有页面,有交互,有输入框,有按钮,有加载状态,也有用户真正会经历的流程。开发者写下的逻辑最终要进入浏览器,被真实地运行、展示、触发和验证。 因此,浏览器测试的意义并不只是确认某段代码能否执行,而是关注应用在浏览器环境中是否真的按预期工作。 ...
2022-10-16
ics-to-json
我无论作什麽,始终在想着,只要我的精力允许我的话,我就要首先为我的祖国服务。——(苏联)巴甫 昨天提到可以订阅ics,那能不能将ics转json呢?可以试试这个ics-to-json github:https://github.com/cwlsn/ics-to-json 使用: 123456789npm i ics-to-json// 或者cnpm i ics-to-json// 或者pnpm i ics-to-json// 或者yarn add ics-to-json// 或者tyarn add ics-to-json 我这里通过browserify测试: 1cnpm install -g browserify 编写main.js 12const icsToJson = require('ics-to-json')window.icsToJson = icsToJson.default 1browserify main.js -o bundle.js 编写页面 123456789101112<!DOCTYPE html><htm...

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