使用TypeScript进行反应：如何创建引用道具

问题描述

我正在将Ionic与React（打字稿）一起使用，并且正在创建自定义表单生成器。在那里，我创建了必须具有ref属性的表单，因为在使用它时需要引用它。 我的问题是我不知道如何为自定义表单构建器定义引用类型的道具。

这是我的使用方式：

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的属性，但我不知道如何。

thnx

解决方法

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

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

,

我刚刚在a very long answer中输入了类似的问题。就您而言，您似乎只犯了一个错误，就是将Form声明为React.FC。 FC界面不知道您用React.forwardRef添加的ref转发，因此这就是为什么在尝试将prop ref传递给它时会出错的原因。

删除该位: React.FC<formProps>，就可以了。您已经在React.forwardRef函数上键入了泛型，因此打字稿将知道返回类型并将其应用于Form。

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

如果您想显式声明类型，则可以执行此操作，但这很麻烦。

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

（同样您也忘记了将handleSubmit的{​​{1}}破坏掉）