javascript - 在 React 中使用方法装饰器时绑定(bind) this

Question

如何将 this 与 transform-decorators-legacy Babel 插件绑定(bind)？例如我有一些简单的装饰器。装饰器工作，但 this 在组件的方法上未定义。

fucntion myDecorator(target, name, descriptor) {
    var oldValue = descriptor.value;

    descriptor.value = function() {
        ...// Doing some stuff here I need the decorator for
        ...// (for example logging on every method call)
        return oldValue.apply(null, arguments);
    };

    return descriptor;

}

class MyClass extends React.Component {
    @myDecorator
    myMethod() {
        ...// this.props... is unavailable here(`this` is undefined)
    }
}

如果我尝试将@myDecorator 与一些@autobind 一起使用我得到的装饰器TypeError:无效的属性描述符。不能同时指定访问器和值或可写属性，因为

A data descriptor is a property that has a value, which may or may not be writable. An accessor descriptor is a property described by a getter-setter pair of functions. A descriptor must be one of these two flavors; it cannot be both.

在我的示例中，我不能使用 value() 和 get()。

在构造函数中绑定(bind) (this.myMethod = thid.myMethod.bind(this)) 似乎也没有帮助，因为您绑定(bind)了未修饰的方法。

Answer 1

这就是我设法解决这个问题的方法:使用提到的代码 @autobind装饰者:

function myDecorator(target, key, descriptor) {
    let fn = descriptor.value;

    return {
        configurable: true,

        get() {
            let boundFn = fn.bind(this);
            Reflect.defineProperty(this, key, {
                value: boundFn,
                configurable: true,
                writable: true
            });

            return function() {
                ...// Doing some stuff here I need the decorator for
                ...// (for example logging on every method call)
                return boundFn.apply(this, arguments)
            };
        }
    };
}