如何使用带Typescript的useCallback键入引用回调？

9cbw7uwe 于 2022-11-18 发布在 TypeScript

关注(0)|答案(2)|浏览(133)

我是Typescript的新手，不知道如何键入这种情况。我正在编写一个自定义挂钩，并试图创建一个回调引用。我的问题是，这个函数设置了引用的current，但没有返回任何内容，但由于我将其用作引用，所以Typescript对我大喊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>
}

typescript

来源：https://stackoverflow.com/questions/62350411/how-do-i-type-a-ref-callback-with-usecallback-with-typescript

2条答案

按热度按时间

bf1o4zei1#

问题是您说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];
};

赞(0）回复(0）举报 2022-11-18

332nm8kg2#

我提出一个不同的解决方案。
这是假设作者试图使用一个“callback ref”来执行一个副作用，当ref改变时。当使用两个返回值时，ref可能仍然会意外地被设置（通过使用ref），而没有执行回调（setRef），我猜这不是作者的意图。
键入类似这样的内容看起来像预期的那样工作（使用作者的例子）：

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

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

  return [setRef]
}

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

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

注意：我还将HTMLDivElement更改为HTMLElement，以使挂钩更通用。

赞(0）回复(0）举报 2022-11-18

我来回答

如何使用带Typescript的useCallback键入引用回调？

2条答案

相关问题

热门标签

最新问答