react-hook-form中register属性的类型定义问题求助

你可以直接使用React Hook Form内置的UseFormRegisterReturn类型替代any，这个类型正是调用register(fieldName)后返回值的准确类型，完全匹配你的场景。

基础解决方案 #

修改FormInput.tsx中的类型定义，步骤如下：

1. 从react-hook-form导入UseFormRegisterReturn类型
2. 将FormInputProps里的register属性类型替换为该类型

修改后的完整代码：

import React from 'react';
import { UseFormRegisterReturn } from 'react-hook-form';
// 导入你的FormLayout和TextField组件

type FormInputProps = {
  label: string;
  register: UseFormRegisterReturn; // 替换原有的any类型
  errorMessage?: string;
  type?: string;
};

const FormInput = ({ label, register, errorMessage, type }: FormInputProps) => {
  return (
    <FormLayout errorMessage={errorMessage}>
      <TextField
        label={label}
        {...register}
        fullWidth
        size="small"
        type={type ?? undefined}
        error={!!errorMessage} // 简化错误判断逻辑
      />
    </FormLayout>
  );
};

export default React.memo(FormInput);

进阶：关联表单类型（可选） #

如果希望register属性和你的表单类型FormInputs强绑定，让类型检查更严谨，可以给FormInput组件添加泛型：

import React from 'react';
import { UseFormRegisterReturn, FieldValues } from 'react-hook-form';
// 导入你的FormLayout和TextField组件

type FormInputProps<T extends FieldValues> = {
  label: string;
  register: UseFormRegisterReturn<T>;
  errorMessage?: string;
  type?: string;
};

const FormInput = <T extends FieldValues>({ label, register, errorMessage, type }: FormInputProps<T>) => {
  return (
    <FormLayout errorMessage={errorMessage}>
      <TextField
        label={label}
        {...register}
        fullWidth
        size="small"
        type={type ?? undefined}
        error={!!errorMessage}
      />
    </FormLayout>
  );
};

export default React.memo(FormInput);

使用组件时，泛型会自动从register的上下文推断出来，无需额外声明：

<FormInput
  label={label}
  register={{ ...register('firstName') }}
  errorMessage={errors['firstName']?.message}
/>

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