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

相关推荐
candyTong17 小时前
一觉醒来,大模型就帮我排查完页面性能问题
前端·javascript·架构
魔术师Grace17 小时前
我给 AI 做了场入职培训
前端·程序员
玩嵌入式的菜鸡18 小时前
网页访问单片机设备---基于mqtt
前端·javascript·css
前端一小卒18 小时前
我用 Claude Code 的 Superpowers 技能链写了个服务,部署前差点把服务器搞炸
前端·javascript·后端
滑雪的企鹅.19 小时前
HTML头部元信息避坑指南大纲
前端·html
一拳不是超人19 小时前
老婆天天吵吵要买塔罗牌,我直接用 AI 2 小时写了个在线塔罗牌
前端·ai编程
excel21 小时前
如何解决 Nuxt DevTools 中关于 unstorage 包的报错
前端
Rust研习社21 小时前
使用 Axum 构建高性能异步 Web 服务
开发语言·前端·网络·后端·http·rust
C澒21 小时前
AI 生码 - API2Code:接口智能匹配与 API 自动化生码全链路设计
前端·低代码·ai编程
浔川python社1 天前
HTML头部元信息避坑指南技术文章大纲
前端·html