React使用useRef ts 报错

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

bash 复制代码
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通常用于在组件外部创建一个对组件的引用,以便在组件外部使用。

相关推荐
草字2 小时前
uniapp 打开横竖屏。usb调试时可以横竖屏切换,但是打包发布后却不行?
java·前端·uni-app
SEO-狼术2 小时前
Stimulsoft Reports.JS 2025
开发语言·javascript·ecmascript
EF@蛐蛐堂2 小时前
Federation vs Garfish vs Micro-app 微前端选型(二)
前端·vue.js·前端框架
洋不写bug3 小时前
前端html基础标签
前端·html
GISer_Jing3 小时前
前端学习总结——AI&主流前沿方向篇
前端·人工智能·学习
渣哥3 小时前
用错注入方式?你的代码可能早就埋下隐患
javascript·后端·面试
尘世中一位迷途小书童3 小时前
Monorepo 工具大比拼:为什么我最终选择了 pnpm + Turborepo?
前端·架构
一枚前端小能手3 小时前
🔍 重写vue之ref和reactive
前端·javascript·vue.js
星链引擎3 小时前
4sapi.com开发者进阶版(技术导向,侧重 “原理 + 最佳实践”)
前端
尘世中一位迷途小书童3 小时前
2025年了,你还在用传统的多仓库管理吗?Monorepo 架构深度解析
前端·架构