如何在保留export default class语法的同时为React组件使用HOC？

当然有办法满足你的需求啦！下面给你几种方案，其中最贴合你想要的export default class语法的是装饰器写法，还有不用装饰器的变通方案供你选择：

装饰器可以直接挂载在class声明上方，让你完全保留export default class的结构：

import MyHoc from './MyHoc';

@MyHoc()
export default class MyClass extends React.Component {
  // 你的组件逻辑写在这里
}

不过要注意：

• 装饰器目前属于ECMAScript的Stage 2提案，如果你用Create React App，需要借助@babel/plugin-proposal-decorators或者CRACO这类工具修改配置才能启用；
• 如果是TypeScript项目，要在tsconfig.json里开启experimentalDecorators选项。

要是不想折腾装饰器的配置，也可以用一个小技巧把HOC和class声明结合起来，依然能保留export default的形式：

import MyHoc from './MyHoc';

export default MyHoc()(class MyClass extends React.Component {
  // 组件逻辑
});

这里我们把class直接作为表达式传给HOC，同时给class命名MyClass，这样在React DevTools里还能正常识别组件名称，方便调试。

这种方式和你原本了解的写法类似，但结构更清晰，也不需要任何额外配置：

import MyHoc from './MyHoc';

class MyClass extends React.Component {
  // 组件逻辑
}

export default MyHoc()(MyClass);

虽然不是直接在class声明行写export，但整体依然简洁易懂，所有环境都能兼容。

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