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

相关推荐
程序媛_MISS_zhang_01106 分钟前
浏览器开发者工具(尤其是 Vue Devtools 扩展)和 Vuex 的的订阅模式冲突
前端·javascript·vue.js
fruge8 分钟前
Vue3.4 Effect 作用域 API 与 React Server Components 实战解析
前端·vue.js·react.js
神秘的猪头20 分钟前
🌐 CSS 选择器详解:从基础到实战
前端·javascript
Zyx200720 分钟前
JavaScript 执行机制深度解析(上):编译、提升与执行上下文
javascript
远山枫谷22 分钟前
CSS选择器优先级计算你真的会吗?
前端·css
Forever_xl22 分钟前
埋点监控平台全景调研
前端
神秘的猪头22 分钟前
JavaScript 中的 `map()` 方法详解与面向对象编程初探
前端·javascript
有点笨的蛋22 分钟前
这些 CSS 小细节没处理好,你的页面就会“闪、抖、卡”——渲染机制深度拆解
前端·css
烟袅25 分钟前
JavaScript 中 map 与 parseInt 的经典陷阱:别再被“巧合”骗了!
前端·javascript
烟袅26 分钟前
JavaScript 中 string 与 new String() 的本质区别:你真的懂“字符串”吗?
前端·javascript