如何通过HOC在类组件中传入自身状态调用React自定义Hook

类组件内部不允许直接触发Hook调用，这是React Hook的硬性规则：Hook仅能在函数组件、自定义Hook的顶层作用域调用，类组件的render方法、生命周期、实例方法都不符合Hook的调用环境要求，直接调用会抛出规则错误。
你需要的「将类组件自身state作为入参传给Hook」的需求，不需要在类组件内部调用Hook，只要调整高阶组件的封装逻辑就能实现，完全匹配你预期的调用写法。

核心思路是把Hook的调用逻辑始终放在HOC返回的函数组件顶层（符合Hook规则），HOC注入给类组件的不是固定的Hook返回值，而是一个接收类组件传参、同步参数到HOC内部、返回最新Hook计算结果的方法。
HOC封装参考代码：

// withSampleHookHoc.js
import React, { useState } from 'react';

// 你的自定义Hook示例
function useSampleHook(inputText) {
  // 这里替换成你自己的Hook逻辑
  return `Processed result: ${inputText}`;
}

export function withSampleHookHoc(WrappedComponent) {
  // HOC返回合法的函数组件，作为Hook的运行载体
  return function HOCContainer(props) {
    // 存储类组件传过来的Hook入参
    const [hookParams, setHookParams] = useState('');
    // 顶层调用Hook，传入同步后的参数
    const hookReturnValue = useSampleHook(hookParams);

    // 注入给类组件的调用方法
    const injectProps = {
      name: (currentStateText) => {
        // 参数变化时同步到HOC内部，触发Hook重算
        if (currentStateText !== hookParams) {
          // 用微任务规避render阶段直接setState的警告
          queueMicrotask(() => setHookParams(currentStateText));
        }
        // 直接返回当前最新的Hook计算结果
        return hookReturnValue;
      }
    };

    return <WrappedComponent {...props} {...injectProps} />;
  };
}

这个封装下，你写的预期类组件代码不需要做任何修改就能正常运行，类组件内部不需要感知Hook的存在，只需要传参拿结果即可。

• 任何试图在类组件内部直接写Hook调用逻辑的写法都是违规的，不管怎么包HOC都不能突破React的Hook调用规则限制。
• 如果你的自定义Hook入参更新频率很高，可以把参数同步逻辑换成unstable_batchedUpdates做批量更新，减少不必要的重渲染。
• 常规无参数的HOC+Hook方案之所以能运行，本质也是Hook在HOC返回的函数组件顶层调用，和这个方案的底层逻辑一致。

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