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);
