hook是啥

Posted 2023-04-24

参考技术A Hook的本意是钩；钩状物；勾拳。但hook也是一种音乐的表现形式，通常出现在副歌的位置，但hook并不是副歌。hook的原意是钩子，引申开来，在音乐上，hook指的是一首歌曲中最能钩人的部分。

所以在流行音乐里面说的Hook指的是一首歌里面会勾住别人注意力，特别容易被人记忆的点，只要一听到这个Hook你马上就知道这首歌是什么。

因此一首能够被大家广为传唱、有知名度的歌，通常歌曲里都会至少有一个Hook。

react-hook-form 中的寄存器是啥类型？

【中文标题】react-hook-form 中的寄存器是啥类型？

【英文标题】：What type is register from react-hook-form?react-hook-form 中的寄存器是什么类型？

【发布时间】：2022-01-23 06:23:41

【问题描述】：

在 Typescript 中使用 react-hook-form 时，有一个组件会发送一些 props，register 就是其中之一。

问题在于它在接口中声明时的类型：

export interface MyProps 
  title: string;
  ...
  register: (string | undefined) => void;

在这里声明register的正确方法是什么？

也尝试过：

import  RegisterOptions  from 'react-hook-form';
    export interface MyProps 
      title: string;
      ...
      register: RegisterOptions;
    

【问题讨论】：

您使用的是 react-hook-form 版本 6 还是 7？因为它从一个版本到另一个版本发生了很大变化。

根据 package.json 是"react-hook-form": "^7.15.2",

只需查看文档。类型在页面顶部react-hook-form.com/api/useform/register

@Khorne07 输入它作为答案.. 你可以获得积分

【参考方案1】：

试试这个。

import  RegisterOptions, UseFormRegisterReturn  from 'react-hook-form';

export interface MyProps 
  title: string;
  ...
  register: (name: string, options?: RegisterOptions) => UseFormRegisterReturn;

【参考方案2】：

您可以从UseFormReturn 检索寄存器类型。

import  UseFormReturn  from 'react-hook-form';

export interface MyProps 
  title: string;
  register: UseFormReturn['register'];

在 react-hook-form 中，我们建议转发 ref 而不是传递register 方法。

【参考方案3】：

如果您将 register 作为自定义组件中的道具调用或在 Typescript 中的某些自定义输入字段中使用，则可以使用以下代码。

首先从 'react-hook-form' 导入 UseFormRegister 和 FieldValues

import UseFormRegister, FieldValues  from 'react-hook-form'

之后，定义寄存器的类型为

register: UseFormRegister<FieldValues>

并且繁荣，您不需要使用“任何”类型进行注册。