React使用useRef ts 报错

news2024/11/15 11:01:55

最近在写自己的React项目,我在使用useRef钩子函数的时候发现

TS2322: Type MutableRefObject<HTMLDivElement | undefined> is not assignable to type LegacyRef<HTMLDivElement> | undefined
Type MutableRefObject<HTMLDivElement | undefined> is not assignable to type RefObject<HTMLDivElement>
Types of property current are incompatible.
Type HTMLDivElement | undefined is not assignable to type HTMLDivElement | null
Type undefined is not assignable to type HTMLDivElement | null
index.d.ts(303, 9): The expected type comes from property ref which is declared here on type

这是我的代码:

const backgroundDOM = useRef<HTMLDivElement>();

在这里插入图片描述
解决方法:

const backgroundDOM = useRef<HTMLDivElement>(null);

增加初始化值,也可以用createRef
但这两个钩子函数不一样

  1. 返回值:useRef 返回一个对象,该对象具有 current 属性,该属性包含对组件的引用。createRef返回一个函数,该函数在组件挂载时创建一个引用,并在组件卸载时将其清理。

  2. 生命周期:useRef 在组件挂载时创建引用,并在组件卸载时将其清理。createRef 在组件挂载时创建引用,并在组件卸载时将其清理。

  3. 用法:useRef 通常用于在组件内部创建一个对组件的引用,以便在组件内部使用。createRef通常用于在组件外部创建一个对组件的引用,以便在组件外部使用。

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.coloradmin.cn/o/2038948.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

代码随想录算法训练营第十五天(一)| 110.平衡二叉树 (优先掌握递归)257. 二叉树的所有路径

110.平衡二叉树 题目&#xff1a; 给定一个二叉树&#xff0c;判断它是否是 平衡二叉树 示例 1&#xff1a; 输入&#xff1a;root [3,9,20,null,null,15,7] 输出&#xff1a;true示例 2&#xff1a; 输入&#xff1a;root [1,2,2,3,3,null,null,4,4] 输出&#xff1a;fa…

vuex的原理和使用方法

简介 Vuex 是 Vue.js 应用的状态管理模式&#xff0c;它为应用内的所有组件提供集中式的状态&#xff08;数据&#xff09;管理。可以帮我们管理 Vue 通用的数据 (多组件共享的数据)。 Vuex的构成 state&#xff1a;state 是 Vuex 的数据中心&#xff0c;也就是说state是用来…

【生成式人工智能-十一一个不修改模型就能加速语言模型生成的方法】

一个加速语言模型生成的方法 现在语言模型的一个弊端speculative decoding预言家预测的问题 speculative decoding 模块的实现方法NAT Non-autoregressive模型压缩使用搜索引擎 一些更复杂些的speculative decoding 实现方式 speculative decoding 是一个适用于目前生成模型的加…

软件运维实施维保方案(Doc完整版原件)

1.项目情况 2.服务简述 2.1服务内容 2.2服务方式 2.3服务要求 2.4服务流程 2.5工作流程 2.6业务关系 2.7培训 3.资源提供 3.1项目组成员 3.2服务保障 软件全套资料部分文档清单&#xff1a; 工作安排任务书&#xff0c;可行性分析报告&#xff0c;立项申请审批表&#xff0c;产…

NodeJS:查看、设置 nodejs 堆内存

一、查看nodejs 堆内存 vite.config.ts 从Node.js v10.0.0开始&#xff0c;v8模块被引入&#xff0c;允许你访问V8引擎的一些内部特性&#xff0c;包括堆内存统计信息。 import v8 from v8 // 可用内存总量 console.log(Total available heap size: ${v8.getHeapStatistics()…

2024年优秀的网站建设公司推荐

如今&#xff0c;高达 48% 的用户认为&#xff0c;判断企业信誉的首要因素是其网站设计。我整理了一份 2024 年全球顶级网站设计公司名单。 企业为什么要投资网站设计和开发&#xff1f; 数字平台或社交媒体在当前情况下取得了飞跃&#xff0c;帮助企业上以数字方式推广他们的…

【数据结构】顺序表——赋源码(结尾)

目录 1. 线性表 2. 顺序表 2.1 概念与结构 2.2 分类 2.2.1 静态顺序表 2.2.2 动态顺序表 2.3 动态顺序表的实现 正文 1. 线性表 线性表&#xff08; linear list &#xff09;是n个具有相同特性的数据元素的有限序列。 线性表是⼀种在实际中⼴泛使 ⽤的数据结构&#x…

停止项目大小调整,开始搜索层自动缩放!

作者&#xff1a;来自 Elastic Matteo Piergiovanni&#xff0c;John Verwolf 我们新的 serverless 产品的一个关键方面是允许用户部署和使用 Elastic&#xff0c;而无需管理底层项目节点。为了实现这一点&#xff0c;我们开发了搜索层自动扩展&#xff0c;这是一种根据我们将在…

华为路由的AAA是什么?

1.AAA及用户管理概述 华为路由的AAA是Authentication(认证)、‌Authorization(授权)和Accounting(计费)的简称&#xff0c;‌是一种提供认证、‌授权和计费的安全管理机制。‌ AAA作为一种网络安全管理机制&#xff0c;‌主要提供以下功能和服务&#xff1a;‌ 认证&#xff…

Linux系统编程:线程 1

1.线程的概念 线程——轻量级的进程&#xff0c;线程是CPU执行的最小单位&#xff0c;进程是资源分配的基本单位&#xff0c;线程的创建和调度的时空开销都比进程小&#xff1b; 2.线程的组成 线程组成&#xff1a;线程pid&#xff0c;程序计数器&#xff0c;寄存器集合&…

pdf文件密码忘记,有办法可以打开pdf文件吗?

为确保PDF文件的重要信息不轻易外泄&#xff0c;我们一般会给pdf文件设置打开密码&#xff0c;确保pdf文件的隐私与安全&#xff0c;但随着时间的推移&#xff0c;让我们遗忘了原本设置的密码&#xff0c;这时我们该怎么办呢&#xff1f; 当大家遇到这种情况时&#xff0c;可能…

箱号/柜号是什么?各种单据处理有没有省力的办法?

集装箱编号&#xff0c;作为全球独一无二的标识符&#xff0c;其结构严谨且信息丰富。该编号由四部分构成&#xff1a;首先是三个字母组成的箱主代码&#xff0c;这代表了集装箱的拥有者&#xff0c;即船公司或租箱公司的专属标识&#xff1b;紧接着是固定字母“U”&#xff0c…

SpringBoot快速入门(自动创建)

目录 前言 步骤 1 创建项目 2 选择生成器springBoot 3 修改后&#xff0c;如图所示 4 点击下一步 5 点击Web----SpringWeb 6 点击创建 6.1 如果发生报错如: 6.2 替换合适版本&#xff0c;等待重新加载 7 添加contronller类 7.1 添加HelloController 类 8 ​​创建…

Linux驱动入门实验班——SR501红外模块驱动(附百问网视频链接)

目录 一、工作方式 二、接口图 三、编写思路 1.构造file_operations结构体 2.实现read函数 3.编写入口函数 4.编写中断处理函数 5.编写出口函数 6.声明出入口函数以及协议 四、源码 五、课程链接 一、工作方式 SR501人体红外感应模块有两种工作模式&#xff1a; …

PMP和软考高项知识的重叠和差异

PMP和高项是项目管理证书&#xff0c;备考了高项之后&#xff0c;也可以参加PMP考试&#xff0c;今天我们就来说一说PMP和高项知识的重叠度以及差异。&#xff08;文末PMP资料&#xff09; 一、知识体系的重叠 1、 项目管理过程 PMP和高项都强调项目管理的全过程&#xff0c;包…

电脑屏幕录制指南,2024四大免费录屏软件推荐!

无论是制作教学视频、录制在线课程、捕捉游戏精彩瞬间&#xff0c;还是进行远程技术支持&#xff0c;一款优秀的录屏软件都是必不可少的工具。今天&#xff0c;我们就来聊聊几款免费且功能强大的录屏软件。 Foxit录屏大师 链接&#xff1a;www.foxitsoftware.cn/REC/ Foxit录…

BGP 反射器联邦实验

要求&#xff1a; 1.如图连接网络&#xff0c;合理规划IP地址&#xff0c;AS 200内IGP协议为OSPF 2.R1属于AS 100&#xff1b;R2-R3-R4小AS 234 R5-R6-R7小AS 567&#xff0c;同时声明大AS 200&#xff0c;R8属于AS 300 3.R2-R5 R4-R7 之间为联邦EBGP邻居关系 4.R1-R8之…

实时捕捉与追溯:得物基于 eBPF 打造云上网络连接异常摄像头

近期我们容器 SRE 团队基于 eBPF 技术建设网络连接异常感知能力&#xff0c;灰度上线过程中发现了生产环境 10 以上的应用配置错误、程序 Bug 等问题。在和应用负责同学同步风险过程中&#xff0c;大家都挺好奇我们如何实现在对应用无侵入的情况下发现服务连接异常的。本篇文档…

贷齐乐hpp+php特性注入

文章目录 运行过程waf第一层waf拦截第二层waf拦截 数据库查询语句注入思路注入 运行过程 foreach ($_REQUEST as $key > $value) {$_REQUEST[$key] dowith_sql($value);}$request_uri explode("?", $_SERVER[REQUEST_URI]);if (isset($request_uri[1])) {$rewr…

77.游戏分析工具计算数据偏移

免责声明&#xff1a;内容仅供学习参考&#xff0c;请合法利用知识&#xff0c;禁止进行违法犯罪活动&#xff01; 内容参考于&#xff1a;易道云信息技术研究院 上一个内容&#xff1a;76.游戏分析工具读取内存存到对象数据分析器一 以它的代码为基础进行修改 COBJContext…