在dva脚手架或create-react-app脚手架组合中使用装饰器

最近作react项目的时候，使用的是create-react-app脚手架搭建的项目，用的ant-design框架，在使用UI框架的Form组件的时候，发现 Form.create 方法是一个典型的装饰器，因而就改为装饰器的写法

dav框架

一、先安装包

yarn add @babel/plugin-proposal-decorators --save

二、将.webpackrc 改为.webpackrc.js而后具体配置css

const config = {};
//用于跨域
config.proxy = {
  "/api": {
    "target": "http://localhost:7001",
    "changeOrigin": true,
    "pathRewrite": {
      "^/api": ""
    }
  }
}
//antd按需加载引入
config.extraBabelPlugins = [
  ["import", {
    "libraryName": "antd",
    "libraryDirectory": "es",
    "style": "css"
  }],
  //装饰器语法配置
  [
    "@babel/plugin-proposal-decorators",
    {
      "legacy": true
    }
  ]
]



export default config;

在 creat-react-app建立的脚手架配置

一、先安装包 react

yarn add @babel/plugin-proposal-decorators --save

二、在项目根目录下建立.babelrc, config-overrides.js文件webpack

{
    "presets": [
        "react-app"
    ],
    "plugins": [
        [
            "import",
            {
                "libraryName": "antd",
                "libraryDirectory": "es",
                "style": "css" // `style: true` 会加载 less 文件
            }
        ],
        [
            "@babel/plugin-proposal-decorators",
            {
                "legacy": true
            }
        ]
    ]
}

三、删除package.json的babel配置web

// 删除下面几行
"babel": {
    "presets": [
      "react-app"
    ]
  },

这样咱们就能够使用装饰器语法了json

装饰器语法使用以前拿antd的包为例子api

// const WrappedNormalLoginForm = Form.create({ name: 'normal_login' })(Login);

// export default WrappedNormalLoginForm; 抛出的是这个改变后的变量而不是Login这个组件了

使用后

@Form.create({ name: 'normal_login' }) 注意这里不要加分号放在class上面

export default Login