我是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>
}
2条答案
按热度按时间bf1o4zei1#
问题是您说
useCustom
的返回值将是RefObject<HTMLDivElement>
,但返回的是(node: HTMLDivElement) => void
。您的自定义挂接应返回2个值:一个用于设置ref值,另一个用于ref本身。因此它看起来像
useState
钩子:332nm8kg2#
我提出一个不同的解决方案。
这是假设作者试图使用一个“callback ref”来执行一个副作用,当ref改变时。当使用两个返回值时,ref可能仍然会意外地被设置(通过使用
ref
),而没有执行回调(setRef
),我猜这不是作者的意图。键入类似这样的内容看起来像预期的那样工作(使用作者的例子):
注意:我还将
HTMLDivElement
更改为HTMLElement
,以使挂钩更通用。