React项目中如何让装饰器在函数式组件中生效？

核心解决方案：直接以高阶组件（HOC）方式调用 #

你的mydecorator本质是一个返回高阶组件的函数，不需要依赖装饰器语法，直接将函数式组件作为参数传入即可：

写法1：直接嵌套调用 #

const TestComponent = mydecorator()(() => {
  return <div>Test</div>;
});

写法2：拆分声明更清晰 #

// 定义原始函数组件
const RawTestComponent = () => {
  return <div>Test</div>;
};

// 用装饰器函数包裹得到增强后的组件
const TestComponent = mydecorator()(RawTestComponent);

为什么装饰器语法不能用在函数组件上？ #

TypeScript当前的装饰器规范（基于Stage 2提案）仅支持装饰类、类方法、类属性等类相关成员，不允许直接装饰const声明的函数式组件变量，因此会抛出TS1206: Decorators are not valid here错误。

你的装饰器本质是一个高阶组件（HOC）——接收组件并返回新组件的函数，直接调用完全能实现和类组件装饰器一样的效果，无需依赖装饰器语法。

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