Reactでメソッドデコレータを使用する場合はこれをバインドします

Question

バインドする方法thisをtransform-decorators-legacyとしますBabel Plugin？ たとえば、私はシンプルなデコレータを持っています。デコレータは機能しますが、コンポーネントのメソッドでthisは未定義です。私はいくつかの@autobindデコレータで@myDecorator使用しようとする

データ記述子は、または書き込み可能であってもなくてもよい値を持つプロパティですので

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) 
    } 
} 

私は、 TypeError: Invalid property descriptor. Cannot both specify accessors and a value or writable attribute得ます。アクセサー・ディスクリプタは、ゲッター・セッター・ペアの関数で記述されるプロパティーです。記述子は、これらの2つのフレーバのいずれかでなければなりません。それは両方になることはできません。

私の例では、私はとget()を使用できません。

デコレートされていないメソッドをバインドするので、コンストラクタ（this.myMethod = thid.myMethod.bind(this)）でのバインディングは役に立ちません。

Answer 1

装飾されたメソッドの問題はありませんか？

しかし、あなたが逃したことがあります。あなたが.bindmyMethodをあなたのconstructorの中に入れたとしても、どこからでも、myDecoratorは実行範囲を変更します。

oldValue.apply(null, arguments)

基本的に、あなたはnullとターゲットスコープ（MyClass）を置き換えます。

だから何あなたが欲しいのはこれです：

oldValue.apply(this, arguments)

このフィドルを参照してください：言及@autobindデコレータからのコードを使用して ：http://jsfiddle.net/free_soul/0n6v1dtp/

Answer 2

は、これは私がこの問題を解決するために管理方法です

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) 
      }; 
     } 
    }; 
}