在dva腳手架或create-react-app腳手架組合中使用裝飾器

最近做react項目的時候，使用的是create-react-app腳手架搭建的項目，用的ant-design框架，在使用UI框架的Form組件的時候，發現 Form.create 方法是一個典型的裝飾器，於是就改成裝飾器的寫法

 

 

dav框架

1、先安裝包 

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

 

2、將.webpackrc  改成.webpackrc.js然后具體配置

 

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創建的腳手架配置

1、先安裝包 

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

 

2、在項目根目錄下創建.babelrc, config-overrides.js文件

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

3、刪除package.json的babel配置

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

這樣我們就可以使用裝飾器語法了

 

 

裝飾器 語法使用之前  拿antd的包為例子

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

// export default WrappedNormalLoginForm;        拋出的是這個改變后的變量  而不是Login這個組件了

 

使用后

 

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

 

export default Login