create-react-app下的@装饰器正确的使用方式记录

在create-react-app下使用@装饰器会报错''Support for the experimental syntax 'decorators-legacy' isn't currently enable"

⾼阶组件本身是对装饰器模式的应⽤，⾃然可以利⽤ ES7 中出现的装饰器语法来更优雅的书写代码。

yarn add @babel/plugin-proposal-decorators
yarn add customize-cra

更新confifig-overrides.js

//配置完成后记得重启下
const {override, addDecoratorsLegacy } = require("customize-cra");
module.exports = override(
...,
addDecoratorsLegacy()//配置装饰器
);

安装react-app-rewired并且修改启动package.json

yarn add react-app-rewired

"scripts": {
-   "start": "react-scripts start",
+   "start": "react-app-rewired start",
-   "build": "react-scripts build",
+   "build": "react-app-rewired build",
-   "test": "react-scripts test",
+   "test": "react-app-rewired test",
}

装饰器有warning，vscode设置⾥加上

javascript.implicitProjectConfig.experimentalDecorators": true