React使用useRef ts 报错

server/2024/11/13 9:53:16/

最近在写自己的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

这是我的代码:

javascript">const backgroundDOM = useRef<HTMLDivElement>();

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

javascript">const backgroundDOM = useRef<HTMLDivElement>(null);

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

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

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

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


http://www.ppmy.cn/server/102272.html

相关文章

SDL库自适应窗口大小及遇到的坑

一、窗口尺寸改变大小时&#xff0c;视频卡住不动 网上介绍的方法有&#xff1a; 1&#xff1a;修改源码中的代码&#xff01; SDL_OnWindowResized中的SDL_WINDOWEVENT_SIZE_CHANGED更改为SDL_WINDOWEVENT_RESIZED 2&#xff1a;SDL_EventState(SDL_WINDOWEVENT, SDL_IGNORE…

Golang | Leetcode Golang题解之第343题整数拆分

题目&#xff1a; 题解&#xff1a; func integerBreak(n int) int {if n < 3 {return n - 1}quotient : n / 3remainder : n % 3if remainder 0 {return int(math.Pow(3, float64(quotient)))} else if remainder 1 {return int(math.Pow(3, float64(quotient - 1))) * …

C#多态_接口

接口是行为的抽象表现 关键字 interface 接口申明的规范 1.不包含成员变量 2.只包含&#xff0c;方法&#xff0c;属性&#xff0c;索引器&#xff0c;事件 3.成员不能被实现 4.成员可以不用写访问修饰符&#xff0c;不能是私有的&#xff08;不写默认是public也可以写pro…

c语言编程有什么难点

C语言编程面临的难点主要有1、指针的理解和使用、2、内存管理、3、复杂的数据结构实现、4、并发和多线程编程以及5、跨平台编程。指针是C语言中最具特色也最令人头疼的部分。它直接操作内存地址&#xff0c;能够提供强大但复杂的数据管理方式。正确而高效地使用指针&#xff0c…

记处理微前端的一些问题

主子应用样式 因为子应用是是后加载的 所以如果柱应用和子应用有重的 会以子应用为准、 需要我们将主应用的样式权重提高或尽量避免重复 我这里还遇到一个问题就是主应用使用rem定义的样式加载子应用会失效 解决办法就是没定义默认字体html{ font-size: 16px; } 主应用重新加载…

掌握ChatGPT写作艺术:从入门到精通的四个层次

这些周末我仔细研究了如何通过优化提示词提升ChatGPT输出内容的质量。 关于如何使用ChatGPT辅助我们的写作&#xff0c;我归纳了以下规律&#xff0c;希望能为你带来启发。 一、写作步骤 撰写一篇文章&#xff0c;思路上必须是从抽象到具体逐步深入。 首先我们需要明确写什么…

leetcode 31-40(2024.08.18)

立个flag&#xff0c;1-100题每天分配10题&#xff0c;不会就先空着&#xff08;2&#xff0c;8&#xff09;。 昨天周六&#xff0c;摆烂一天。 1. 31&#xff1a;下一个排列 class Solution:def nextPermutation(self, nums: List[int]) -> None:"""Do …

SMS流媒体服务器-MPEG-PS流的深度解析

1.简介 ps流的解析&#xff0c;只要按照标准文档对照16进制的流数据&#xff0c;基本都能看的明白。但是实际项目中会碰到各种各样的问题。本文将对如何高效的解析出音视频数据发表一下个人的看法。 介绍一下本人的开源流媒体&#xff0c;点个star&#xff0c;有兴趣一起开发的…