1 问题

函数组件要想使用ref就得用forwardRef包裹组件，但是包裹了之后定义就变了，之前的泛型定义就不见了，是在是痛苦，特别是函数体内要用到泛型的时候

// 比如有这么一个组件
function Component<T>(props: P) {
  // 里面有使用到泛型
  const [data, setData] = useState<T[]>([])
  return 
}
// 用forwardRef后泛型就不见了
forwardRef(Component)

// 这样用就会报错
<Component<string>/>

2 解决

推荐最后一种方法
参考地址

// 防止打不开网页复制一下
// Redecalare forwardRef
declare module "react" {
  function forwardRef<T, P = {}>(
    render: (props: P, ref: React.Ref<T>) => React.ReactElement | null
  ): (props: P & React.RefAttributes<T>) => React.ReactElement | null;
}


// Just write your components like you're used to!

type ClickableListProps<T> = {
  items: T[];
  onSelect: (item: T) => void;
};
function ClickableListInner<T>(
  props: ClickableListProps<T>,
  ref: React.ForwardedRef<HTMLUListElement>
) {
  return (
    <ul ref={ref}>
      {props.items.map((item, i) => (
        <li key={i}>
          <button onClick={(el) => props.onSelect(item)}>Select</button>
          {item}
        </li>
      ))}
    </ul>
  );
}

export const ClickableList = React.forwardRef(ClickableListInner);