React HOC类型不兼容：函数组件无法传入类组件类型参数

你的问题根源很明确：你写的withLoader HOC目前只接受类组件（带new()构造签名的类型），但你传入的Table是一个函数组件，TypeScript会严格检查类型签名，所以抛出了不匹配的错误。

核心修正方案：兼容函数组件和类组件 #

React提供了内置的React.ComponentType<P>类型，它同时涵盖了函数组件和类组件，我们只需要把HOC的参数类型替换成这个即可。另外还要修复你代码里className的语法错误（布尔值直接放入模板字符串会变成"true"或"false"，应该把三元表达式的结果完整放入）。

修正后的完整代码：

import React from 'react';

const withLoader = <P extends object>(
  WrappedComponent: React.ComponentType<P>, // 改用ComponentType兼容两种组件类型
  loading: boolean
) => {
  return class WithLoading extends React.Component<P> {
    render() {
      return (
        <div>
          {/* 修正className的三元表达式写法 */}
          <div className={loading ? 'loader' : ''}></div>
          <WrappedComponent {...this.props} />
        </div>
      );
    }
  };
};

额外优化建议（可选） #

当前的HOC把loading作为固定参数传入，意味着包裹后的组件无法动态切换加载状态。如果需要动态控制加载状态，建议让HOC接收loading作为props，而不是静态参数：

const withLoader = <P extends object>(WrappedComponent: React.ComponentType<P>) => {
  // 给原组件的props添加loading属性
  type Props = P & { loading: boolean };
  return class WithLoading extends React.Component<Props> {
    render() {
      const { loading, ...restProps } = this.props;
      return (
        <div>
          <div className={loading ? 'loader' : ''}></div>
          <WrappedComponent {...restProps as P} />
        </div>
      );
    }
  };
};

// 使用方式：
const TableHOC = withLoader(Table);
// 渲染时动态传入loading状态
<TableHOC loading={isLoading} {...tableProps} />

这样你的HOC会更灵活，支持动态切换加载状态，同时类型也能完美匹配。

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