React Hook Form：多表单如何注册多上下文并跨表单访问数据？

针对你拆分多表单、每步持久化且需要跨表单访问数据的需求，以下是两种可行的解决方案，均无需额外创建全局数据上下文：

方案一：为每个表单创建独立上下文 #

默认的FormProvider是单一上下文，嵌套会被覆盖，因此我们可以为每个表单类型创建专属的React上下文，让子组件能精准获取对应表单实例。

步骤1：创建表单专属上下文 #

import { createContext, useContext } from 'react';
import { UseFormReturn, FieldValues } from 'react-hook-form';

// 为每个表单类型定义独立上下文
interface IForm1 { id?: number; }
interface IForm2 { name?: string; }

const Form1Context = createContext<UseFormReturn<IForm1> | undefined>(undefined);
const Form2Context = createContext<UseFormReturn<IForm2> | undefined>(undefined);

步骤2：改造通用表单组件 #

让GenericForm支持传入自定义上下文，替代默认的FormProvider：

interface GenericFormProps<T extends FieldValues> {
  children: React.ReactNode;
  formContext: React.Context<UseFormReturn<T> | undefined>;
}

const GenericForm = <T extends FieldValues>(props: GenericFormProps<T>) => {
  const form = useForm<T>();

  return (
    <props.formContext.Provider value={form}>
      <form>{props.children}</form>
    </props.formContext.Provider>
  );
};

步骤3：在父组件中使用并在子组件获取数据 #

// 父组件
const MyForms = () => (
  <>
    <GenericForm<IForm1> formContext={Form1Context}>
      <Component1 />
    </GenericForm<IForm1>>
    <GenericForm<IForm2> formContext={Form2Context}>
      <Component1 />
    </GenericForm<IForm2>>
  </>
);

// 子组件
const Component1 = () => {
  const form1 = useContext(Form1Context);
  const form2 = useContext(Form2Context);

  // 避免上下文未初始化的情况
  if (!form1 || !form2) return null;

  const id = form1.watch('id');
  const name = form2.watch('name');

  return (
    <div>
      {id} and {name}
    </div>
  );
};

此方案类型安全，每个表单上下文独立，完全符合React Hook Form的设计逻辑，且无需额外全局状态。

方案二：父组件统一管理表单实例，通过props传递 #

如果不想新增上下文，可以在父组件创建所有表单实例，直接通过props传递给需要跨表单访问的子组件：

import { useForm, UseFormReturn } from 'react-hook-form';

interface IForm1 { id?: number; }
interface IForm2 { name?: string; }

// 父组件
const MyForms = () => {
  const form1 = useForm<IForm1>();
  const form2 = useForm<IForm2>();

  return (
    <>
      <form>
        <Component1 form1={form1} form2={form2} />
        {/* Form1的其他字段组件 */}
      </form>
      <form>
        <Component1 form1={form1} form2={form2} />
        {/* Form2的其他字段组件 */}
      </form>
    </>
  );
};

// 子组件
const Component1 = ({ 
  form1, 
  form2 
}: { 
  form1: UseFormReturn<IForm1>, 
  form2: UseFormReturn<IForm2> 
}) => {
  const id = form1.watch('id');
  const name = form2.watch('name');

  return (
    <div>
      {id} and {name}
    </div>
  );
};

此方案更直接，适合表单层级较浅的场景；若子组件嵌套较深，可结合React的useContext封装传递逻辑，避免props层层透传。

为什么之前的尝试无效？ #

1. 嵌套FormProvider：默认FormProvider是单一上下文，子组件只能获取最近的父级上下文，深层会覆盖上层。
2. 合并useForm实例：两个实例的方法（如watch、setValue）会相互覆盖，且无法通过类型区分对应表单的上下文。

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