React使用useRef ts 报错

7柒丶2024-08-19 12:24

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

但这两个钩子函数不一样

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