类型推断不适用于 React.forwardRef() 的引用参数

Question

我正在尝试利用

React.forwardRef()

，但我对以下问题感到困惑：

看来 IntelliJ 能够正确干扰引用的类型，在本例中为

FilterRef

。

但是，如果没有编译错误表明该值不存在，我无法访问当前值

ref.current

。

在运行时打印出来，当然可以确认

current

是一个现有属性。

不确定是什么原因导致此问题。

Answer 1

Refs 可以是具有

current

属性的对象，例如

useRef

返回的对象，也可以是

ref

回调函数，因此编译器是正确的。

您应该在

ref

组件中创建一个新的

Filter

并使用

useImperativeHandle

将其与转发的组件同步：

export const Filter = forwardRef<FilterRef, FilterProps>((props, ref) => {
  const filterRef = useRef(null);

  useImperativeHandle(ref, () => filterRef.current!, []);

  ...
});