reactjs - 用 typescript react forwardRef

Question

我已经使用 React 转发了 ref forwardRef 下面是我的代码:

interface PropsDummy {}

const ProfileMenu = forwardRef<HTMLInputElement, PropsDummy>((props, ref) => {
  console.log(ref.current);
}

但是为什么这会导致 typescript 错误？

Property 'current' does not exist on type '((instance: HTMLInputElement | null) => void) | MutableRefObject<HTMLInputElement | null>'

但是如果我使用别名，那么当前对象可以很好地工作而不会出现 typescript 错误

interface PropsDummy {}

const ProfileMenu = forwardRef<HTMLInputElement, PropsDummy>((props, ref) => {
  const myRef = ref as React.RefObject<HTMLInputElement>;
  console.log(myRef.current);
}

如何在没有 typescript 错误的情况下获取当前对象？

谢谢

Answer 1

它不起作用的原因是因为 ForwardedRef 的类型定义为:

type ForwardedRef<T> = ((instance: T | null) => void) | MutableRefObject<T | null> | null;

试图只访问 .current，而不做一些类型检查是行不通的，因为如您所见，ref 可能是一个函数，而函数没有这样的属性(current)。

当您将对象转换为您期望的类型时它起作用了，但请注意 refs 可以是函数或对象(或 null!)，因此您应该在尝试访问 current 属性。

这应该可行:

const ProfileMenu = forwardRef<HTMLInputElement, PropsDummy>((props, forwardedRef) => {
  if (forwardedRef != null && typeof forwardedRef !== 'function') {
    console.log(forwardedRef.current);
  }
  
  return (
    <div className="App" ref={forwardedRef}>
      <h1>Hello there</h1>
    </div>
  );
});