reactjs - TypeScript，React 使用带有 props 的 forwardRef 导致错误，并且 ref 为 null

Question

需要：想要将props&传递forwardRef给子组件

MVCE：这就是我在stackblitz上尝试时得到的结果- 孩子内部的引用为空 - 但没有错误（如下所示）......

但是，我在代码库中遇到的错误

希望有一个答案/链接可以清楚地解释这一点并帮助解决这个问题 - 我看到的示例仅通过道具或仅通过 forwardRef；在 stackblitz 上，它也有效；

Answer 1

您混淆了类型参数的顺序。forwardRef签名看起来像这样：ref 类型和props 类型function forwardRef<T, P = {}>在哪里。TP

像这样更改您的代码：

export const DivField = forwardRef<HTMLDivElement, any>((props, ref) => {
  console.log("DivField:", props, " -- ref:", ref);
  return <div ref={ref}>this is the div field only </div>;
});
DivField.displayName = "DivField";

链接到 Stackblitz