Loading [MathJax]/jax/output/CommonHTML/config.js
前往小程序,Get更优阅读体验!
立即前往
首页
学习
活动
专区
圈层
工具
发布
首页
学习
活动
专区
圈层
工具
MCP广场
社区首页 >专栏 >react在ts中提示ref问题

react在ts中提示ref问题

作者头像
阿超
发布于 2022-08-21 05:57:48
发布于 2022-08-21 05:57:48
2.2K0
举报
文章被收录于专栏:快乐阿超快乐阿超

首先按照官方文档的demo写好代码,却报错如下:

安装插件Error Lens后:

如何解决?

前往Textref源码,可以看到是需要一个叫LegacyRef的类型

我们进LegacyRef,看到其就是Refstring的类型

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

这里出现了新的问题,不能将MutableRefObject<Text | null |undefined>分配给Ref<Text>

我们进入useRef源码,看到其包含几个重载

分别查看MuteableRefObjectRefObject

可以看到RefObjectRef中容许的其中一种类型

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

在原有代码React.useRef()中传入null

报错解决

同理,trRef一样

注意此处Ref<TextRef>内的泛型使用的是konva/lib/shapes/Text包下的Text,改名为TextRef

除了在定义变量左侧申明类型,在方法右侧也可以申明泛型,让编辑器自动推测

本文参与 腾讯云自媒体同步曝光计划,分享自作者个人站点/博客。
原始发表:2022-06-16,如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 作者个人站点/博客 前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体同步曝光计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
暂无评论
推荐阅读
编辑精选文章
换一批
React源码解析之React.createRef()/forwardRef()
一、React.createRef() GitHub: https://github.com/AttackXiaoJinJin/reactExplain/blob/master/react16.8.6/packages/react/src/ReactCreateRef.js
进击的小进进
2019/09/05
1.6K0
React源码解析之React.createRef()/forwardRef()
你不知道的React Ref
在我们平时使用React的时候,对于React中的Ref的属性,相信大家使用的频率是很低的。说实话,真正了解React Ref属性的人少之又少,我都不确定自己是否真正的了解了所有的内容,毕竟它不是一个经常能够被人使用的属性,而且在过去一段时间,它本身的API在不断修改。那么在本教程中,我将尽可能的向大家介绍React中的Ref
FE情报局
2022/12/05
2.3K0
你不知道的React Ref
【React】你想知道的关于 Refs 的知识都在这了
Refs 提供了一种方式,允许我们访问 DOM 节点或在 render 方法中创建的 React 元素。
Nealyang
2019/11/08
3.1K0
120. 精读《React Hooks 最佳实践》
React 16.8 于 2019.2 正式发布,这是一个能提升代码质量和开发效率的特性,笔者就抛砖引玉先列出一些实践点,希望得到大家进一步讨论。
黄子毅
2022/03/14
1.3K0
React ref & useRef 完全指南,原来这么用!
在这篇文章中,你将学习如何使用React.useRef()钩子来创建持久的可变值(也称为references或refs),以及访问DOM元素。
前端修罗场
2022/07/29
7.2K0
TS_React:Hook类型化
在前几天,我们开辟了--「TypeScript实战系列」,主要讲TS在React中的应用实战。
前端柒八九
2022/08/25
2.6K0
Reac19 升级指南
Reactv19 已经发布 beta 版本,想要快速体验如何升级到 v19 版本尝鲜的朋友们可以查阅进行了解
ACK
2024/05/07
4760
Reac19 升级指南
你要的react+ts最佳实践指南
本文根据日常开发实践,参考优秀文章、文档,来说说 TypeScript 是如何较优雅的融入 React 项目的。
xiaofeng123aa
2022/10/03
3.2K0
TS 常见问题整理(60多个,持续更新ing)
不应该在模块中使用命名空间或者说将命名空间导出: 使用命名空间是为了提供逻辑分组和避免命名冲突,模块文件本身已经是一个逻辑分组,并且它的名字是由导入这个模块的代码指定,所以没有必要为导出的对象增加额外的模块层。
coder_koala
2020/03/03
15.6K0
TS 常见问题整理(60多个,持续更新ing)
React + TypeScript 实践
需要添加额外的配置:"allowSyntheticDefaultImports": true
公众号@魔术师卡颂
2021/05/08
6.6K0
🔖TypeScript 备忘录:如何在 React 中完美运用?
一直以来,ssh 身边都有很多小伙伴对 TS 如何在 React 中运用有很多困惑,他们开始慢慢讨厌 TS,觉得各种莫名其妙的问题降低了开发的效率。
ssh_晨曦时梦见兮
2022/03/09
3K0
🔖TypeScript 备忘录:如何在 React 中完美运用?
React实战精讲(React_TS/API)
今天,我们继续「前端面试」的知识点。我们来谈谈关于「React实战」的相关知识点和具体的算法。
前端柒八九
2022/12/19
10.5K0
React实战精讲(React_TS/API)
react源码解析13.hooks源码
​ 在hook源码中hook存在于Dispatcher中,Dispatcher就是一个对象,不同hook 调用的函数不一样,全局变量ReactCurrentDispatcher.current会根据是mount还是update赋值为HooksDispatcherOnMount或HooksDispatcherOnUpdate
全栈潇晨
2021/06/16
7060
React报错之Object is possibly null
原文链接:https://bobbyhadz.com/blog/react-useref-object-is-possibly-null[1]
chuckQu
2022/08/19
9640
React报错之Object is possibly null
TS 进阶 - 实际应用 02
在 devDependencies 中包含了 @types/react 与 @types/react-dom 等,用于自动加载 node_modules/@types 下的类型声明文件。
Cellinlab
2023/05/17
1.8K0
我们应该如何优雅的处理 React 中受控与非受控
大家好,我是19组清风。有段时间没有和大家见面了,最近因为有一些比较重要的事情(陪女朋友和换了新公司)在忙碌所以销声匿迹了一小段时间,
19组清风
2022/12/19
6.7K0
我们应该如何优雅的处理 React 中受控与非受控
美丽的公主和它的27个React 自定义 Hook
在上一篇git 原理中我们在「前置知识点」中随口提到了Hook。其中,就有我们比较熟悉的React Hook。
前端柒八九
2023/10/25
1.1K0
美丽的公主和它的27个React 自定义 Hook
干货 | React 中的 Canvas 动画
移动端硬件性能越来越好的今天,页面的交互也越来越丰富,Web 体验在不断向原生应用靠拢,加入了越来越多的手势与动画。除了常见的 CSS 动画外,有时候我们还会使用到 Canvas 或者 SVG 进行动画内容表现。
携程技术
2021/12/13
3.1K0
干货 | React 中的 Canvas 动画
React基础
需要为遍历项指定一个不重复的key key 在 HTML 结构中是看不到的,是 React 内部用来进行性能优化时使用
P轴
2022/11/18
1.7K0
React基础
入门 TypeScript 编写 React
Create React App 是一个官方支持的创建 React 单页应用程序的CLI,它提供了一个零配置的现代构建设置。当你使用 Create React App 来创建一个新的 TypeScript React 工程时,你可以运行:
icepy
2019/06/24
5.4K0
相关推荐
React源码解析之React.createRef()/forwardRef()
更多 >
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档