如何用TypeScript传递useForm方法给子组件及替代UseFormProps

现有代码：

const methods = useForm<Module>({
  defaultValues: defaultValues,
  mode: "onChange",
  shouldFocusError: true,
  shouldUnregister: true,
  resolver: yupResolver(module)    
});

请问应当使用哪些props来替代UseFormProps？以及如何通过TypeScript将这些methods props传递给子组件？

一、关于替代UseFormProps的方案 #

其实你没必要特意找其他props替代UseFormProps——React Hook Form本身就支持直接把useForm的配置项拆解为独立props传入，或者直接复用UseFormProps的类型定义来约束自定义props。如果是想避免直接依赖这个内置类型，你可以提取实际用到的配置字段来定义自己的自定义类型：

// 提取你实际用到的配置项，定义自定义类型
import { UseFormProps } from 'react-hook-form';
import { Module } from './your-types-file';

type CustomFormConfig = {
  defaultValues: Module;
  mode?: UseFormProps<Module>['mode'];
  shouldFocusError?: boolean;
  shouldUnregister?: boolean;
  resolver?: UseFormProps<Module>['resolver'];
};

// 使用时传入符合自定义类型的配置
const customConfig: CustomFormConfig = {
  defaultValues: defaultValues,
  mode: "onChange",
  shouldFocusError: true,
  shouldUnregister: true,
  resolver: yupResolver(module)
};

const methods = useForm<Module>(customConfig);

不过更高效的方式是直接复用UseFormProps，因为它是React Hook Form官方提供的标准配置类型，没必要额外造轮子。

二、TypeScript下将methods传递给子组件 #

有两种常用的实现方式：

方式1：直接传递methods并使用UseFormReturn约束类型 #

// 子组件定义
import { UseFormReturn, Controller } from 'react-hook-form';
import { Module } from './your-types-file';

// 子组件props类型
type FormChildProps = {
  formMethods: UseFormReturn<Module>;
};

export const FormChild = ({ formMethods }: FormChildProps) => {
  const { control, register, handleSubmit } = formMethods;
  
  return (
    <form onSubmit={handleSubmit((formData) => console.log('提交数据:', formData))}>
      <input {...register('moduleName')} placeholder="模块名称" />
      <Controller
        control={control}
        name="moduleStatus"
        render={({ field }) => (
          <select {...field}>
            <option value="active">启用</option>
            <option value="disabled">禁用</option>
          </select>
        )}
      />
      <button type="submit">提交表单</button>
    </form>
  );
};

// 父组件中传递methods
const methods = useForm<Module>({ /* 你的配置项 */ });
<FormChild formMethods={methods} />

方式2：通过React Context全局传递（适合多层嵌套组件） #

如果你的表单组件层级较深，直接逐层传递props太繁琐，可以用Context来全局共享form methods：

// 单独创建form context文件
import { createContext, useContext, UseFormReturn } from 'react';
import { Module } from './your-types-file';

// 创建Context，默认值设为undefined
const FormContext = createContext<UseFormReturn<Module> | undefined>(undefined);

// 导出Provider组件
export const FormProvider = FormContext.Provider;

// 导出自定义Hook，简化Context调用
export const useFormContext = () => {
  const context = useContext(FormContext);
  if (!context) {
    throw new Error('useFormContext必须在FormProvider内部使用');
  }
  return context;
};

// 父组件中用Provider包裹子组件
const methods = useForm<Module>({ /* 你的配置项 */ });
<FormProvider value={methods}>
  {/* 这里可以放任意层级的子组件 */}
  <FormChild />
</FormProvider>

// 子组件中直接通过自定义Hook获取methods
export const FormChild = () => {
  const { register, handleSubmit } = useFormContext();
  
  return (
    <form onSubmit={handleSubmit((formData) => console.log('提交数据:', formData))}>
      <input {...register('moduleName')} placeholder="模块名称" />
      <button type="submit">提交表单</button>
    </form>
  );
};

内容的提问来源于stack exchange，提问作者jay