React Hook Forms 如何使用 Typescript 将错误作为 props 传递

React Hook Forms 是一个用于处理表单验证的库，它提供了一种简单且强大的方式来处理表单输入和错误信息。在使用 Typescript 编写 React Hook Forms 时，我们可以将错误信息作为 props 传递给组件，以便更好地管理和显示错误信息。

typescript
interface FormData {
  username: string;
  password: string;
}
const { register, handleSubmit, errors } = useForm();

typescript
  type="text"
  name="username"
  ref={register({ required: '用户名不能为空' })}
/>
{errors.username && {errors.username.message}}

typescript
import React from 'react';
import { useForm } from 'react-hook-form';
interface FormData {
  username: string;
  password: string;
}
const FormComponent: React.FC = () => {
  const { register, handleSubmit, errors } = useForm();
  const onSubmit = (data: FormData) => {
    console.log(data);
  };
  return (
    
              type="text"
        name="username"
        ref={register({ required: '用户名不能为空' })}
      />
      {errors.username && {errors.username.message}}
              type="password"
        name="password"
        ref={register({ required: '密码不能为空' })}
      />
      {errors.password && {errors.password.message}}
      提交
    
  );
};
export default FormComponent;