React Hook Form：如何在自定义输入组件中获取RegisterOptions

要避免重复传递required这类规则，有两种简洁的方案：

方案1：单独定义规则并复用 #

先把register的配置项单独抽离成变量，同时传给组件和register，组件就能直接读取规则：

// 父组件中定义规则
const firstNameRules = { required: "This is required" };

// 使用自定义组件
<MyInput
  name="firstName"
  label="First Name"
  {...register("firstName", firstNameRules)}
  rules={firstNameRules}
/>

自定义组件中通过props.rules访问：

const MyInput = React.forwardRef(({ name, label, rules, ...rest }, ref) => {
  // 判断是否为必填项
  const isRequired = !!rules?.required;

  return (
    <>
      <label htmlFor={name}>
        {label} {isRequired && <span style={{color: 'red'}}>*</span>}
      </label>
      <input name={name} placeholder="Jane" {...rest} ref={ref} />
    </>
  );
});

方案2：使用useController（推荐） #

这是React Hook Form官方推荐的自定义受控组件方案，能直接在组件内获取规则、字段状态等信息，无需额外传递规则：

改写自定义组件 #

import { useController } from "react-hook-form";

const MyInput = ({ control, name, label, rules }) => {
  const { field, fieldState } = useController({
    control,
    name,
    rules,
  });

  // 直接从rules中判断必填
  const isRequired = !!rules?.required;

  return (
    <>
      <label htmlFor={name}>
        {label} {isRequired && <span style={{color: 'red'}}>*</span>}
      </label>
      <input
        id={name}
        {...field}
        placeholder="Jane"
      />
      {/* 直接显示错误信息 */}
      {fieldState.error && <p style={{color: 'red'}}>{fieldState.error.message}</p>}
    </>
  );
};

父组件中使用 #

import { useForm } from "react-hook-form";

function App() {
  const { control, handleSubmit } = useForm();

  const onSubmit = (data) => console.log(data);

  return (
    <form onSubmit={handleSubmit(onSubmit)}>
      <MyInput
        control={control}
        name="firstName"
        label="First Name"
        rules={{ required: "This is required" }}
      />
      <button type="submit">Submit</button>
    </form>
  );
}

这种方式不仅能获取规则，还能直接拿到字段的错误状态、值等，完全符合React Hook Form的设计理念，彻底避免重复配置问题。

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