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-11-15
uniapp-x之uts插件运行hutool
若要为自己而活,首先必须为别人而活。——色内卡 注意这里是安卓真机设备 注意配置好HBuilderX的gradle配置、JDK配置、安卓SDK配置等,在HBuilderX的运行配置中能找到 首先HBuilderX新建一个uniapp-x工程 就是在uni-app项目默认模板下面勾选uni-app x 然后先运行到安卓手机上,我们自定义一个基座 HBuilderX选择运行——运行到手机或模拟器——制作自定义调试基座 我这里输入包名,等待云打包完成后即可在运行到Android真机设备时选择自定义基座运行 然后我们右键新建一个目录叫uni_modules,右键uni_modules新建uni_modules插件 选择UTS插件-API插件新建,我这里输入的名字叫dromara-hutool 新建以后我们在uni_modules/dromara-hutool/utssdk/app-android/config.json中引入hutool的依赖 123456{ "minSdkVersion": "21", "dependenc...
2024-11-21
渐变的艺术:变量的力量——阿超与ChatGPT 4o的代码探险
人类之所以有进步,主要原因是下一代不怎么听上一代的话。——倪匡 效果在右下角,请滚动页面查看~ .scroll-text { position: fixed; bottom: 10%; right: 10%; background: linear-gradient(180deg,var(--color-light) 0%,var(--color-light) 40%,var(--color-dark) 60%,var(--color-dark) 100%); background-size: 100% 200%; background-position: center calc(var(--scroll) * 100%); background-repeat: no-repeat; -webkit-background-clip: text; -webkit-text-fill-color: transparent;...
2025-04-01
vuepressecosystem
我真不知道在这个世界上我了解过谁。——玛格丽特·米切尔《飘》 https://github.com/vuepress/ecosystemhttps://ecosystem.vuejs.press/zh/ 介绍 VuePress Ecosystem:VuePress2 的官方插件和主题最近,我发现了一个非常重要的开源项目——VuePress Ecosystem。这个项目由 VuePress 团队开发和维护,旨在为 VuePress2 提供官方的插件和主题。今天,我将为大家详细介绍一下这个项目的特点和使用方法。 项目概述VuePress Ecosystem 是 VuePress2 的官方插件和主题库。项目自 2023 年 9 月 5 日创建以来,已经获得了 43 个星标和 61 个 forks,显示了其在社区中的受欢迎程度。项目使用 TypeScript 编写,并且遵循 MIT 许可证,确保其免费和开源。 项目特点 官方插件和主题:VuePress Ecosystem 提供了一系列官方插件和主题,帮助用户轻松扩展和定制 VuePress2 网站。 高质量:作为官方插件和主题库,V...
2020-09-27
随机数
志不强者智不达。——《墨子·修身》 javascript0到99随机整数: 1parseInt(Math.random() * 100); java0到99随机整数 1new Random().nextInt(100);
2021-02-14
uniapp实现简单登录注册
生活的情况越艰难,我越感到自己更坚强,甚而也更聪明。——高尔基 首先去uniapp官网 可以看到介绍 uni-app 是一个使用 Vue.js 开发所有前端应用的框架,开发者编写一套代码,可发布到iOS、Android、Web(响应式)、以及各种小程序(微信/支付宝/百度/头条/QQ/钉钉/淘宝)、快应用等多个平台。 DCloud公司拥有600万开发者用户,几十万应用案例、12亿手机端月活用户,数千款uni-app插件、70+微信/qq群。阿里小程序工具官方内置uni-app(详见),腾讯课堂官方为uni-app录制培训课程(详见),开发者可以放心选择。 uni-app在手,做啥都不愁。即使不跨端,uni-app也是更好的小程序开发框架(详见)、更好的App跨平台框架、更方便的H5开发框架。不管领导安排什么样的项目,你都可以快速交付,不需要转换开发思维、不需要更改开发习惯。 首先我们去下载官方IDE——HBuilderX 解压 启动IDE——HBuilderX.exe 我们点击文件->新建-...
2025-10-01
x402
人们宁愿去关心一个蹩脚电影演员的吃喝拉撒和鸡毛蒜皮,而不愿了解一个普通人波涛汹涌的内心世界。——路遥《平凡的世界》 x402:为互联网打造的下一代支付协议——Coinbase 的开放支付协议全解析在加密货币和 Web3 世界不断进化的今天,支付系统依然是“链上应用到现实世界”最核心的基础设施之一。Coinbase 推出的 x402 项目,正试图用开放协议的思路,重新定义互联网支付的连接方式。本文将带你深入了解 x402 的项目定位、技术亮点、典型用法和未来前景。 一、项目概览 项目地址:coinbase/x402 官网:https://x402.org 一句话描述:A payments protocol for the internet. Built on HTTP. 主语言:TypeScript 开源协议:Apache 2.0 Star:1825+,Fork:286+,Issue:104+,社区活跃 二、x402 要解决什么问题?x402 的目标是:让任何 Web 服务都能像集成 HTTP 一样,快速、安全地集成加密支付/微支付能力。 开放协议:...

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