“RefObject<HTMLDivElement>”类型的参数不可分配给“IDivPosition”类型的参数

Question

我正在使用带有 React 的 Typescript。我为我的自定义函数创建了一个单独的文件DivPosition.tsx

我正在使用 useRef 将 div 元素的引用传递给我的函数，但在传递参数时出现错误。

const Home = () => {
    const divRef = useRef<HTMLDivElement>(null);
    const x = DivPosition(divRef);

    return (
        ...
    )
}

我的 DivPosition.tsx 代码：

interface IDivPosition{
    divRef: HTMLDivElement | null
}

export const DivPosition = ({divRef}: IDivPosition) => {

  useEffect(() => {
      console.log(divRef);
  });
    ...
  return x;
};

我收到一条错误消息： “RefObject”类型的参数不可分配给“IDivPosition”类型的参数。 “RefObject”类型中缺少属性“divRef”，但在“IDivPosition”类型中是必需的

Answer 1

useRef的返回值为RefObject，类型定义

/*
* convenience overload for refs given as a ref prop as they typically start with a null value
*
* Usage note: if you need the result of useRef to be directly mutable, include `| null` in the type
* of the generic argument.
* @version 16.8.0
* @see https://reactjs.org/docs/hooks-reference.html#useref
*/
function useRef<T>(initialValue: T|null): RefObject<T>;

尝试：

import { MutableRefObject, useEffect, useRef } from 'react';

interface IDivPosition {
  divRef: RefObject<HTMLDivElement>;
}

export const useDivPosition = ({ divRef }: IDivPosition) => {
  useEffect(() => {
    console.log(divRef);
  });
  return null;
};

const Home = () => {
  const divRef = useRef<HTMLDivElement>(null);
  const x = useDivPosition({ divRef });

  return null;
};

软件包版本：

"react": "^16.14.0",
"@types/react": "^16.14.14",
"typescript": "^4.4.2"

此外，请以“use”开头的自定义挂钩命名。

我必须以“use”开头的自定义 Hooks 命名吗？请这样做。这个约定非常重要。没有它，我们将无法自动检查是否违反 Hooks 规则，因为我们无法判断某个函数是否包含对 Hooks 内部的调用。