如何使用 Typescript 使用 useCallback 键入 ref 回调？

Question

我是 Typescript 新手，不知道如何输入这种情况。我正在编写一个自定义挂钩并尝试创建一个回调引用。我的问题是这个函数设置了 ref's current，并且不返回任何内容，但是由于我将它用作 ref ，打字稿对我大喊大叫Property 'current' is missing in type '(node: any) => void' but required in type 'RefObject<HTMLDivElement>'。

先感谢您。

这是代码：

import React, {useCallback, useRef} from 'react'

const useCustom = (): [RefObject<HTMLDivElement>] => {
  const ref = useRef<HTMLDivElement | null>(null)
  const setRef = useCallback(node => {
    ....
    ref.current = node
  }, [])

  return [setRef]
}

const SomeComp = () => {
  const [ref] = useCustom()

  return <div ref={ref}>Text</div>
}

Answer 1

问题是你说的返回值useCustom是RefObject<HTMLDivElement>，但是返回了(node: HTMLDivElement) => void。

您的自定义挂钩应返回 2 个值：一个用于设置 ref 值，另一个用于 ref 本身。所以它看起来像useState钩子：

const useCustom = (): [
  RefObject<HTMLDivElement>,
  (node: HTMLDivElement) => void
] => {
  const ref = useRef<HTMLDivElement | null>(null);
  const setRef = useCallback((node) => {
    ref.current = node;
  }, []);

  return [ref, setRef];
};