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-02-18
scopedb官网首页
我来到这个世界,为了看看太阳和蓝色的地平线。——《城门开》 https://github.com/scopedb/scopedb-site/pull/32 最近忙着给scopedb做了一个最简单的官网首页 这里说到一些细节吧,首先是适配移动端或者说小尺寸屏幕,这里在没有移动端对应UI设计图的情况下,我们采取pc的布局,因此字体单位使用的vw 然后是这张图片,未来可能会改为带动画的,效果会比较惊艳和抢眼 首页tsx如下 123456789101112131415161718192021222324252627282930313233343536373839import React from "react";import styles from './index.module.css';import Layout from "@theme/Layout";import clsx from "clsx";function HomepageBanner(): React.JSX.Element ...
2024-09-08
PhaserJS网页2D游戏引擎
教育不可缺的是天性与训练。人必须趁年轻就开始学习。——普罗达哥拉斯 项目介绍 PhaserJS 是一个开源的 2D 游戏引擎,使用 HTML5 和 JavaScript 构建。它功能强大且灵活,广泛应用于网页游戏和移动游戏开发。PhaserJS 提供了丰富的 API 来支持图形渲染、物理引擎、动画、声音处理等常见的游戏开发功能,使开发者能够轻松创建跨平台的 2D 游戏。 PhaserJS 的主要特点: 丰富的图形和动画支持:提供 Sprite、Tilemap、Particle 等多种图形元素支持,方便实现复杂的游戏画面。 强大的物理引擎:内置多种物理引擎,包括 Arcade Physics 和 Matter.js,支持游戏物体的碰撞、重力等物理效果。 跨平台:PhaserJS 支持在浏览器、移动设备等多种平台上运行,适用于开发基于 Web 的跨平台游戏。 易用的 API:PhaserJS 提供了清晰、易用的 API,使得游戏开发流程更加顺畅和直观。 官方文档、GitHub地址 官方网站:PhaserJS Documentation GitHub 仓库:phase...
2024-02-21
用canvas消除锯齿的方式
不和不可以接物,不严不可以驭下。——林逋 分享几种canvas消除锯齿的方式 1. 线条坐标增加0.5123456789<canvas id="canvas1" width="200" height="200"></canvas><script> var canvas = document.getElementById('canvas1'); var ctx = canvas.getContext('2d'); ctx.beginPath(); ctx.moveTo(0, 0.5); // 使用0.5增量对齐像素 ctx.lineTo(200, 0.5); // 绘制一条边缘清晰的直线 ctx.stroke();</script> 2. 使用高清画布1234567891011<canvas id="canvas2" style="width:200px; height:200px...
2021-06-01
uniapp中textarea坑
幼稚是会成长,会成熟的。只要不衰老,腐败,就好。——鲁迅 今天在使用uniapp进行开发的时候,发现一个关于textarea标签的坑 代码如下: 12345<template> <view style="width:100%;height: 100%;"> <textarea style="width:100%;height: 100%;" value=" 一般来讲,我们都必须务必慎重的考虑考虑。 带着这些问题,我们来审视一下阿超。 总结的来说, 每个人都不得不面对这些问题。 在面对这种问题时, 阿超因何而发生? 带着这些问题,我们来审视一下阿超。 所谓阿超,关键是阿超需要如何写。 从这个角度来看, 德谟克利特说过一句富有哲理的话,节制使快乐增加并使享受加强。我希望诸位也能好好地体会这句话。 那么, 培根曾经提到过,阅读使人充实,会谈使人敏捷,写作使人精确。这不禁令我深思。 问题的关键究竟为何。 康德在不经意间这样说过,既然我已经踏上这条道路,那么,任何东西都不应妨碍我沿着这条路走下去。这启发...
2026-01-18
AionUi
志士惜年,贤人惜日,圣人惜时。——魏源 AionUi:一款真正“本地优先”的多代理 Cowork 桌面应用AionUi 是一款免费的本地开源桌面应用,用来给你的编码代理和指令工具提供一个轻量但专业的工作空间。它的定位非常明确:Cowork for Gemini CLI、Claude Code、Codex、Opencode、Qwen Code、Goose CLI、Auggie 等等。简单理解,就是把这些分散的代理能力“装进一个统一的生产环境”,在日常工程节奏里更稳定地协作与交付。 项目主页:aionui.com 源码仓库:iOfficeAI/AionUi 技术栈:TypeScript、Electron、React、i18next、better‑sqlite3 等 AionUi 不是“又一个 WebUI”,它强调的是“本地优先”和“工程化”:自带跨平台打包流程、主进程级别的持久化数据库、成熟的国际化与主题系统,以及围绕 UI/UX 设计的辅助知识库。下面从几个关键模块拆开聊聊它的味道与做工。 跨平台构建:Electron Forge + electron...
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...

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