如何在自定义TextInput中使用React Hook Form并规避ref报错保留类型校验

核心问题原因 #

register函数返回的对象中包含ref属性，直接将该对象解构传给普通函数组件时，React会尝试给函数组件设置ref，而函数组件默认无法接收ref，因此抛出你遇到的警告。

最简修改方案 #

用React.forwardRef包裹你的自定义TextField组件，将外部传入的ref转发到内部原生input元素即可，同时保留完整的TypeScript类型校验能力：

import { forwardRef, InputHTMLAttributes } from 'react';

// 组件属性定义：扩展原生input的所有属性，加上自定义的label和error
interface TextFieldProps extends InputHTMLAttributes<HTMLInputElement> {
  label: string;
  error?: string;
}

// 用forwardRef包裹组件
const TextField = forwardRef<HTMLInputElement, TextFieldProps>(
  ({ label, error, ...restInputProps }, ref) => {
    return (
      <>
        <label htmlFor={restInputProps.id}>{label}</label>
        {/* 把转发的ref和其余所有input属性传给原生input */}
        <input ref={ref} {...restInputProps} />
        {error && <span style={{color: 'red'}}>{error}</span>}
      </>
    );
  }
);

// 给组件设置displayName方便调试
TextField.displayName = 'TextField';

export default TextField;

调用方式（和你预期的完全一致） #

<TextField
  {...register("username")}
  id="username"
  label="Username"
  error={errors.username?.message}
/>

此时如果传入register("email")，TypeScript会直接提示你email不在你定义的表单字段类型中，校验能力完全保留，也不会再出现forwardRef相关警告。

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