在react中使用装饰器decorators

在react中使用装饰器decorators

最近在做react项目的时候，遇到同一个组件共用一个方法的问题。由于react已经废弃了mixin，所以就准备用用新东西，选择了ES6中的decorators。

在使用之前需要先下载babel插件

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

修改配置 ( 我用的是antd-moblie,所有只要在config-overrides.js 的配置中加上这句话就行 )

 config = injectBabelPlugin(['@babel/plugin-proposal-decorators', { "legacy": true }], config)

可以给装饰器单独分一个文件夹 decorators.js

// 修饰器是一个对类进行处理的函数。修饰器函数的第一个参数，就是所要修饰的目标类。

function test(target){
    console.log(target)  // 输出的是一个类 要注意类的方法类的实例不能使用 所以如果是要
                         // 给类的实例使用 要挂载原型上
    target.prototype.getDate = ()=>{
        console.log( new Date() )
    }
}

在react组价中引用

import {test} from '@utils/decorator'

@test  // 不能加分号

class MianComponent extends Component {
    componentDidMount(){
        console.log(this,'decorator.js') // 这里的this是类的一个实例
        this.test()                      // 调用
    }
}

export default MainComponent

 可以看到打印出来是在原型上  原型上的方法可以被实例调用

 

 

class A {
    test(){  // 写在这里的方法在原型上 只能被实例（new A()）调用
        alert(1)
    }
}

A.test2 = ()=>{   // 写在这里在constructor上 只能被类（A）调用
    alert(22)
}
console.log(new A())