React使用useRef ts 报错

最新推荐文章于 2025-01-01 19:58:08 发布

7柒丶

最新推荐文章于 2025-01-01 19:58:08 发布

阅读量810

点赞数 1

分类专栏： # React 文章标签： react.js javascript 前端

本文链接：https://blog.youkuaiyun.com/qq_16733389/article/details/141200233

版权

React 专栏收录该内容

4 篇文章

订阅专栏

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

这是我的代码：

const backgroundDOM = useRef<HTMLDivElement>();

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

const backgroundDOM = useRef<HTMLDivElement>(null);

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

返回值：useRef 返回一个对象，该对象具有 current 属性，该属性包含对组件的引用。createRef返回一个函数，该函数在组件挂载时创建一个引用，并在组件卸载时将其清理。
生命周期：useRef 在组件挂载时创建引用，并在组件卸载时将其清理。createRef 在组件挂载时创建引用，并在组件卸载时将其清理。
用法：useRef 通常用于在组件内部创建一个对组件的引用，以便在组件内部使用。createRef通常用于在组件外部创建一个对组件的引用，以便在组件外部使用。