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

相关推荐
vener_5 分钟前
LuckySheet协同编辑后端示例(Django+Channel,Websocket通信)
javascript·后端·python·websocket·django·luckysheet
草字11 分钟前
uniapp input限制输入负数,以及保留小数点两位.
java·前端·uni-app
老码沉思录17 分钟前
React Native 全栈开发实战班 - 性能与调试之打包与发布
javascript·react native·react.js
没有黑科技30 分钟前
基于web的音乐网站(Java+SpringBoot+Mysql)
java·前端·spring boot
前端初见40 分钟前
彻底搞懂前端环境变量使用和原理
前端
小王码农记1 小时前
vue中路由缓存
前端·vue.js·缓存·typescript·anti-design-vue
大G哥1 小时前
我用豆包MarsCode IDE 做了一个 CSS 权重小组件
前端·css
乐闻x1 小时前
Vue实践篇:如何在 Vue 项目中检测元素是否展示
前端·javascript·vue.js
麻花20131 小时前
WPF里面的C1FlexGrid表格控件添加RadioButton单选
java·服务器·前端
理想不理想v2 小时前
【经典】webpack和vite的区别?
java·前端·javascript·vue.js·面试