与 TypeScript 反应：如何创建 ref 属性

Question

我正在将 Ionic 与 React (typescript) 一起使用，并且正在创建我的自定义表单构建器。 在那里我创建了我的表单，它必须有一个 ref 属性，因为我在使用它时需要引用它。 我的问题是我不知道如何为我的自定义表单构建器定义一个引用类型的 prop。

这就是我使用它的方式：

const form = useRef<HTMLFormElement>(null);

return (
  <IonPage>
    <Header />
    <IonContent fullscreen>
      <Form
        ref={form}
        submit={() => onSubmit()}
        fields={ fields }
        render={() => (
          <React.Fragment>
            <IonCard>
              <IonCardHeader>
                <IonLabel>Valamilyen form</IonLabel>
              </IonCardHeader>
              <IonCardContent>
                <Field {...fields.name} />
              </IonCardContent>
            </IonCard>
          </React.Fragment>
        )}/>
    </IonContent>
    <Footer />
  </IonPage>
);

在这里我得到一个错误：属性 'ref' 不存在于类型 'IntrinsicAttributes & IFormProps & IFormState & { children?: ReactNode; }'

我的表单 React.FC 看起来像这样：

type formProps = IFormProps & IFormState;
    
export const Form: React.FC<formProps> = React.forwardRef<HTMLFormElement, formProps>( (props: formProps, porpsRef) => {
  return (
    <form onSubmit={handleSubmit} noValidate={true} ref={porpsRef} />
  );
)};

我需要向我的 Form 组件添加一个名为 ref 的属性，但我不知道如何添加。

谢谢

Answer 1

我认为有一个小错误。 你能试试这个吗

type formProps = IFormProps & IFormState;

export const Form: React.FC<formProps> = 
React.forwardRef<formProps, HTMLFormElement>( (props: 
formProps, porpsRef) =>
{
   return (
       <form onSubmit={handleSubmit} noValidate={true} ref= 
      {porpsRef} />
    );
 )};

Answer 2

我刚刚输入了一个类似问题的很长的答案。 在您的情况下，您似乎只犯了其中一个错误，即将您的Form声明为React.FC 。 FC接口不知道您使用React.forwardRef添加的 ref 转发，这就是为什么您在尝试将 prop ref传递给它时会收到错误的原因。

删除这一点: React.FC<formProps>你应该没问题。 您已经在React.forwardRef函数上键入了泛型，因此React.forwardRef将知道返回类型并将其应用于Form 。

export const Form = React.forwardRef<HTMLFormElement, formProps>(...

如果你想显式声明类型，你可以这样做，但它很麻烦。

export const Form: React.ForwardRefExoticComponent<formProps & React.RefAttributes<HTMLFormElement>> = ...

（也可你忘了解构handleSubmit从formProps ）