reactjs - 如何在可重用组件中输入React Hook Form control prop？

Question

我有一个可重复使用的表单。该表单可以根据其使用位置而具有不同的输入。我将 control 作为 prop 从父组件(包含所有逻辑)以 any 类型传递给此表单，但我希望有更严格的类型。如何做到这一点？

我的意思是，在一个组件中，输入可以类似于 {name: ""} 和另一个 {face: "", address: ""} 那么如何输入CreateForm 中的 control 属性以便它可以处理不同的输入？

保存输入逻辑的父组件:

type CreateFaceInput = {
      name: string;
      cover: string;
    };
    
const FaceModal = ({ open, onClose }: IFaceModalProps) => {

  const {
    handleSubmit,
    control,
  } = useForm<CreateFaceInput>({
    defaultValues: {
      name: '',
      cover: '',
    },
  });

  const onSubmit = (data: CreateFaceInput) => {};

  return (

          <CreateForm
            onSubmit={handleSubmit(onSubmit)}
            control={control}
          />
        )
  );
};

CreateForm.tsx

import { Controller } from 'react-hook-form';

interface ICreateFormProps {
  control: any;
  onSubmit: () => void; 
}

const CreateForm = ({ onSubmit, control }: ICreateFormProps) => {


  return (
      <Controller
        render={({ field, fieldState: { error } }) => (
          <StyledTextField
            {...field}
          />
        )}
        control={control}
      />
  );
};

啊啊啊

Answer 1

可以添加FieldValues类型

import { Control, FieldValues } from "react-hook-form";


interface ICreateFormProps {
     control:?: Control<FieldValues, CreateFaceInput>;