React使用useRef ts 报错

最近在写自己的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.rhkb.cn/news/400892.html

如若内容造成侵权/违法违规/事实不符,请联系长河编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

C++STL初阶(10):list的简易实现(下)

在上一文中我们完成了链表的多数基本接口&#xff0c;本文主要围绕构造函数进行补充 1. 链表的拷贝 在前文中我们没有手动实现拷贝构造&#xff0c;所以使用的就是编译器自动生成的浅拷贝 先使用一下编译器自动生成的浅拷贝&#xff1a; 我们在打印li2之前给li1加入一个数据&…

excel导入

Excel数据导入 使用easyexcel和hutool-poi实现excel导入 1、pom依赖 <dependency><groupId>com.alibaba</groupId><artifactId>easyexcel</artifactId><version>2.2.6</version></dependency><dependency><groupId…

【笔记】Swin-Transformer 的计算量与Transformer的计算量的对比:前者通过使用新颖的窗口技巧,将后者的高阶项变为低阶,大大降低了计算量

补充1&#xff1a; 局部窗口内的自注意力&#xff08;W-MSA&#xff09;: 在 Swin Transformer 中&#xff0c;输入特征图被划分为多个小的窗口&#xff08;例如 7x7 的窗口&#xff09;。在每个窗口内&#xff0c;计算自注意力机制&#xff08;W-MSA, Window-based Multi-Head…

基于LQR算法的机器人轨迹跟踪控制详解

本文摘要 本文详细介绍了基于线性二次型调节器&#xff08;LQR&#xff09;算法的机器人轨迹跟踪控制方法。首先&#xff0c;文章通过建立基于运动学模型的离散状态方程&#xff0c;来描述机器人的当前状态与目标状态之间的关系&#xff0c;并利用此模型进行状态误差的计算。接…

「Unity3D」TextMeshPro-Text(UI)无法拖放到TextMeshPro的属性面板上

继承MonoBehaviour&#xff0c;然后定义public TextMeshPro textPro&#xff0c;属性面板上就会有TextMeshPro的拖放槽&#xff08;slot&#xff09;&#xff0c;以配置含有TextMeshPro的组件对象&#xff08;GameObject&#xff09;。 但此时会发现&#xff0c;含有TextMeshPr…

Linux10 三剑客 正则表达式

三剑客 grep 擅长过滤&#xff0c;按行过滤 首先要把多个虚拟机的网络改成一种形式 爆破攻击&#xff1a;‌爆破攻击是一种尝试通过穷举法&#xff08;即尝试所有可能的组合&#xff09;来破解密码或身份验证的方法。这种攻击通常用于尝试登录到系统、网络或应用程序&#…

C#方法

在 C&#xff03;中&#xff0c;方法的定义包括任意方法修饰符&#xff08;如方法的可访问性&#xff09;、返回值的类型&#xff0c; 然后依次是方法名、输入参数的列表&#xff08;用圆括号括起来&#xff09;和方法体&#xff08;用花括号括起来&#xff09;。 [修饰符] 返…

【昂贵的婚礼】

题目 代码 #include<bits/stdc.h> using namespace std; typedef pair<int, int> PII; #define x first #define y second const int N 110, M 10110; int h[N], e[M], ne[M], w[M], idx; bool st[N]; int n, m; int dist[N]; int tier[N]; void add(int a, int…

爬虫 Web Js 逆向:RPC 远程调用获取加密参数(1)WebSocket 协议介绍

RPC (Remote Procedure Call) 是远程调用的意思。 在 Js 逆向时&#xff0c;本地可以和浏览器以服务端和客户端的形式通过 WebSocket 协议进行 RPC 通信&#xff0c;这样可以直接调用浏览器中的一些函数方法&#xff0c;不必去在意函数具体的执行逻辑&#xff0c;可以省去大量…

超详细!!!electron-vite-vue开发桌面应用之Electron Forge打包项目(三)

云风网 云风笔记 云风知识库 electronforge可将前端静态页面打包成.exe、.deb和.rpm等&#xff0c;能适配各种平台 一、安装依赖 cd my-app npm install --save-dev electron-forge/cli npm exec --packageelectron-forge/cli -c "electron-forge import"安装后pack…

简化工作流连线以及让工作流易于操作的插件:rgthree-comfy与cg-use-everywhere

当我们想要在工作流中进行多种不同配置、功能模块&#xff0c;并在多种不同配置、功能模块间进行切换&#xff0c;每次可以执行不同配置、功能模块&#xff0c;用原来简单的连线方式连接各个节点时&#xff0c;除了连线会十分复杂外&#xff0c;要切换不同配置、功能模块&#…

直接插入排序(C语言)

一、图解 思想: 把待排序的记录按其关键码值的大小逐个插入到一个已经排好序的有序序列中&#xff0c;直到所有的记录插入完为 止&#xff0c;得到一个新的有序序列 。 当插入第i(i>1)个元素时&#xff0c;前面的array[0],array[1],…,array[i-1]已经排好序&#xff0c;此时…

【Java】如何使用jdbc连接并操作MySQL,一文读懂不迷路,小白也能轻松学会

JDBC的原理 JDBC&#xff08;Java Database Connectivity&#xff09;是Java提供的用于连接和操作数据库的API。它允许Java应用程序与各种数据库进行交互&#xff0c;以下是JDBC的基本原理&#xff1a; 驱动程序管理&#xff1a;JDBC使用不同的数据库驱动程序来连接不同类型的…

兼容并蓄,高效集成:EasyCVR视频综合接入能力助力多元化项目需求

随着视频技术的不断进步&#xff0c;视频监控、视频直播、执法记录仪、语音可视对讲、无人机等视频资源的应用场景日益丰富。这些视频资源不仅在数量上快速增长&#xff0c;而且在质量、格式、编码标准等方面也呈现出多样化的特点。因此&#xff0c;为了有效整合这些资源&#…

2024年06月 Python(二级)真题解析#中国电子学会#全国青少年软件编程等级考试

Python等级考试(1~6级)全部真题・点这里 一、单选题(共25题,共50分) 第1题 列表 fruit = [‘西瓜’, ‘菠萝’, ‘哈密瓜’, ‘葡萄’],以下哪个选项,可以获取列表最后一个元素?( ) A:fruit[len(fruit)] B:fruit[len(fruit) - 1] C:fruit[len(fruit) + 1] D:fr…

echarts学习:绘制地图

前言 经过之前一段时间的磨砺&#xff0c;我具备了基本的使用echarts绘制图表的能力。但是在最近这几个月里我接连遇到了几个棘手的任务&#xff0c;这大大的提升了我的echarts水平。其中我遇到的第一个高难度任务就是使用echarts绘制如下的地图&#xff1a; 简单的分析一下&a…

Android studio 引入Json文件

Xcode引入json文件非常简单&#xff0c;没想到Android Studio是有讲究的&#xff0c;必须指定位置。 跟 lib 同一级目录下 创建一个assets&#xff08;如果不存在就创建&#xff09; future: DefaultAssetBundle.of(context).loadString(assets/appcenter.json),针对我这个路…

使用Leaks定位iOS内存泄漏问题并解决

使用Leaks定位iOS内存泄漏问题并解决 前言 内存泄漏问题一直是程序开发中最令人头疼的问题&#xff0c;特别是C/C。虽然C/C在C11之后引入了许多新特性&#xff0c;包括智能指针&#xff0c;自动类型推导等&#xff0c;但C中动态内存的分配和释放仍然需要程序员来显式地进行。…

【网络协议】精讲TCP通信原理!

前言 TCP 把连接作为最基本的对象&#xff0c;每一条 TCP 连接都有两个端点&#xff0c;这种端点我们叫作套接字&#xff08;socket&#xff09;&#xff0c;它的定义为端口号拼接到 IP 地址即构成了套接字&#xff0c;例如&#xff0c;若 IP 地址为 192.3.4.16 而端口号为 80&…

CSS设置文本超出显示省略号

一、单行文本显示省略号 <div class"box"><p>测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本…