如何在类组件中使用React Hook Form？HOC方案报错求助

你尝试通过HOC在类组件中集成react-hook-form但报错，核心原因是Hooks只能在React函数组件或自定义Hook的顶层调用，你的HOC外层普通函数中直接调用useForm违反了Hook使用规则。

错误原因 #

你的ClassHookFormWrap是普通函数而非React组件，直接在该函数内调用useForm()不符合Hook的执行规则——Hooks必须在组件渲染的顶层上下文执行，不能在普通函数、判断逻辑或循环中调用。

修复后的HOC方案 #

将useForm的调用移至HOC返回的函数组件内部，即可符合Hook规则：

修正后的HOC代码 #

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

export const ClassHookFormWrap = (Component) => {
  // 将useForm移到返回的函数组件内部
  return (props) => {
    const form = useForm();
    console.log("form", form, Component)
    return <Component form={form} {...props}  />;
  };
};

类组件使用示例 #

import React from "react";
import { ClassHookFormWrap } from "./ClassHookFormWrap";

class ClassHookForm extends React.Component {
  onSubmit = (data) => {
    console.log(data);
  }
  
  render(){
    const { register, handleSubmit } = this.props.form;
    return(
      <form onSubmit={handleSubmit(this.onSubmit)}>
        <input {...register("username")} placeholder="用户名" />
        <input type="password" {...register("password")} placeholder="密码" />
        <button type="submit">提交</button>
      </form>
    )
  }
}

export default ClassHookFormWrap(ClassHookForm);

替代方案：组件容器包裹 #

如果不想使用HOC，也可以通过函数组件容器实现：创建一个函数组件作为容器，在其中调用useForm后将form实例传递给类组件。

// 函数容器组件
import React from "react";
import { useForm } from "react-hook-form";
import ClassHookForm from "./ClassHookForm";

export const FormContainer = (props) => {
  const form = useForm();
  return <ClassHookForm form={form} {...props} />;
};

// 类组件无需额外包裹
class ClassHookForm extends React.Component {
  onSubmit = (data) => {
    console.log(data);
  }
  
  render(){
    const { register, handleSubmit } = this.props.form;
    return(
      <form onSubmit={handleSubmit(this.onSubmit)}>
        {/* 表单元素 */}
      </form>
    )
  }
}

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