html - 为任何类型的 HTML 元素键入自定义 useRef Hook

Question

我对 Typescript 还是有点陌生​​，我的目标是在 Typescript 中创建一个自定义的 React.useRef 钩子(Hook)，它返回一个 ref。我希望为任何 HTML 元素键入此 ref 而不仅仅是按钮。我遇到了正确输入此自定义 Hook 的问题。

这是我的钩子(Hook):

type CustomRefHook = (dependencies?: string | boolean | number[]) => React.MutableRefObject<HTMLButtonElement | null>;

const useCustomRefHook: CustomRefHook = (...dependencies) => {
  const ref = React.useRef<HTMLButtonElement | null>(null);

  useEffect(() => {
    // ... do stuff
  }, dependencies)

  return ref;
}

目前，我对这个钩子(Hook)的大部分用例都是按钮，但我想最终将其扩展到任何类型的 HTML 元素。我试过使用 HTMLElement 而不是 HTMLButtonElement ，但是我得到一个类型错误:

Type 'MutableRefObject<HTMLElement | null>' is not assignable to type 'string | ((instance: HTMLButtonElement | null) => void) | RefObject<HTMLButtonElement> | null | undefined'.
  Type 'MutableRefObject<HTMLElement | null>' is not assignable to type 'RefObject<HTMLButtonElement>'.
    Types of property 'current' are incompatible.
      Type 'HTMLElement | null' is not assignable to type 'HTMLButtonElement | null'.

每当我尝试将此引用附加到按钮时。使用 HTMLButtonElement 可以消除 Typescript 错误，但我还是希望这个钩子(Hook)能够处理任何类型的 HTML 元素。

Answer 1

ref 的类型需要与它所附加的 DOM 元素完全匹配，因此需要使用泛型来指定元素类型。

自 useCustomRefHook现在是一个通用函数，将类型声明为内联而不是作为单独的类型更有意义 CustomRefHook .

我已经允许这个钩子(Hook)接受 any T 的值, 但你可以使用 T extends HTMLElement如果您只想将其应用于 HTML 元素。这可能很重要，具体取决于 useEffect 中“做事”的内容。 .如果“做事”需要关于 T 的任何具体信息, 那么你需要确保 T使用所需的属性/方法扩展某些内容。

import React, { MutableRefObject, DependencyList, useEffect, useRef } from "react";

const useCustomRefHook = <T extends any>( dependencies: DependencyList = [] ): MutableRefObject<T | null> => {

  const ref = useRef<T | null>(null);

  useEffect(() => {
    // ... do stuff
  }, dependencies);

  return ref;
};

钩子(Hook)返回 MutableRefObject<T | null>基于通用 T . T 的值不可能从参数中推断出来，所以每次调用它时都需要指定泛型。

const Test = () => {
  const ref = useCustomRefHook<HTMLButtonElement>();

  return <button ref={ref} />;
};