React高阶组件报错：TypeError: Cannot call a class as a function

嘿，我一眼就揪出问题所在了——你的Window组件导出方式写错啦！

看你Window组件的最后一行：export default Window(); 你这里直接调用了Window函数，而不是导出这个HOC（高阶组件）函数本身。HOC的本质是一个接收组件作为参数、返回新组件的函数，你现在导出的是Window执行后返回的那个匿名类组件，而不是函数本身。

当你在Player组件里写const PlayerWindow = Window(Player);时，你其实是在尝试把那个匿名类组件当作函数来调用，这就触发了TypeError: Cannot call a class as a function的错误——类是不能像普通函数那样直接调用的呀！

修正后的Window组件代码 #

import React, { Component } from 'react';

function Window(WrappedComponent){
  return class extends Component{
    render(){
      return (
        <div className="window">
          {/* 建议传递props，保证包裹的组件能接收外部传入的参数 */}
          <WrappedComponent {...this.props} />
        </div>
      );
    }
  }
}

// 去掉后面的括号，直接导出HOC函数本身！
export default Window;

补充说明 #

我额外加了{...this.props}传递props，这是HOC的最佳实践之一——如果你后续给PlayerWindow传递props，这些参数能顺利传递给内部的Player组件，避免出现组件无法接收外部参数的问题。

你的Player组件代码不需要改动，现在重新运行项目，这个错误应该就消失啦！

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