JavaScript（ES7）： Decorator(修饰器)应用React

为了解决这两个花括号

export default WithHoc('登录')(Login)

单纯为了让开发变得简洁，并不会从本质上改变我们的代码

1.弹出并且安装babel配置

npm run eject

遇上报错，就本地提交

2.下载配置babel

npm install --save-dev @babel/plugin-proposal-decorators

3.运行项目

npm start

运行成功之后会报错

4.解决报错
1.因为app.js是函数组件,用到了jsx
重新配置：
方法一：
1.app.js引入React组件
方法二：
1.package.json重新配置babel:

"babel": {
    "plugins": [
      [
        "@babel/plugin-proposal-decorators",
        {
          "legacy": true
        }
      ],
      "transform-class-properties"
    ],
    "presets": [
      [
        "react-app",
        {
          "runtime": "automatic"
        }
      ]
    ]
  },

保存之后报错

添加项目依赖安装

 npm install babel-plugin-transform-class-properties -D

5.运行

npm start

6.修改修饰器
1.类需要紧跟着修饰器
2.公开被修饰的类
3.两个参数就需要这个括号

@WithHoc('我的登录')
export defalut Login

6.2.如果这个位置不需要传参就不用括号

@WithHoc

即下面这种情况不需要括号：