如何在React Hook Form+shadcn/ui中避免重复传递control参数？

要解决ItemInput无法访问form.control且不想重复传递参数的问题，你可以借助React Hook Form的useFormContext钩子，结合shadcn/ui的Form组件内置的上下文能力实现：

修改ItemInput.tsx组件 #

在组件中导入useFormContext，从上下文中获取form实例，无需手动传入control：

import { useFormContext } from "react-hook-form"; // 新增导入
import { FormControl, FormField, FormItem, FormMessage } from "./ui/form"
import { Input } from "./ui/input"

type InputProps = {
    name: string
    placeholder: string
}

const ItemInput = ({name, placeholder}: InputProps) => {
  const { control } = useFormContext(); // 从上下文获取control

  return (
    <div>
         <FormField
            control={control} // 使用上下文获取的control
            name={name}
            render={({ field }) => (
              <FormItem>
                <FormControl>
                  <Input placeholder={placeholder} {...field} />
                </FormControl>
                <FormMessage />
              </FormItem>
            )}
          />
    </div>
  )
}

export default ItemInput

确认PracticeForm的结构 #

你的PracticeForm中已经正确使用了shadcn/ui的<Form {...form}>组件，这个组件内部会通过FormProvider将form实例注入到上下文，确保ItemInput作为它的子组件（或后代组件）就能正常获取到上下文。

原理说明 #

shadcn/ui的<Form>组件封装了React Hook Form的FormProvider，会将form实例传递给所有后代组件。通过useFormContext钩子，子组件可以直接从上下文中取出form的control等属性，避免了重复传递props的麻烦。

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