反応成分を持つデコレータ

Question

@myDecorator（バベルを使用）の構文を使用することに非常に興奮しています。私はライフサイクル機能の1つ、具体的にはcomponentWillMountをデコレートし、デコレータ内のコンポーネントのpropsとcontextをチェックしようとしています。しかし、propsまたはcontextのいずれにもアクセスできないようです。私はこれがアンチパターンの一種であるかどうか、あるいは私がちょうどこの間違ったことをしているかどうかはわかりません。

小さな例：

// TestComponent.jsx 
import checkProps from 'checkProps.js'; 

class TestComponent extends React.Component { 
    @checkProps 
    componentWillMount() { 
     // Do something. 
    } 

    render() { 
     return <div>My Component</div> 
    } 
} 

と

// checkProps.js 
export function checkProps(target) { 
    console.log(target.props); 
} 

私はまた、デコレータとthisをチェックするために、矢印の機能を試してみましたが、私はデコレータがそのように動作するものを構成するとは思いません。

また、私のデコレータを工場にして、this.propsとthis.contextを渡してみましたが、コンポーネントのライフサイクル機能をデコレートするときは、thisは未定義です。

Answer 1

ES7 ECMAScriptのデコレータはそうtargetパラメータは、あなたのデコレータが適用された時点ではなく、それはReactによって呼び出された時点で、あなたのクラスですthe same API as Object.defineProperty(target, name, descriptor)を持っています。

export function checkProps(target, name, descriptor) { 
    // Save the original method, it'd be a good idea 
    // to check that it really is a function 
    const decoratee = descriptor.value; 

    // Modify the descriptor to return our decorator 
    // function instead of the original 
    descriptor.value = function decorated(...args) { 
     // Do something before ... 
     console.log('before: ' + name, this.props, args); 

     // Calling the decorated method on this object 
     // with some arguments that could have been 
     // augmented by this decorator 
     decoratee.apply(this, args); 

     // Do something after ... 
     console.log('after: ' + name); 
    }; 
} 

// Or if you wanted to use a factory function to supply some configuration 
// to the decorator you can do it this way 

export function checkProps(config) { 
    return function configurableCheckProps(target, name, descriptor) { 
     // Save the original method, it'd be a good idea 
     // to check that it really is a function 
     const decoratee = descriptor.value; 

     if (config.someOption) { 
      // Do something based on the config 
     } 

     // Modify the descriptor to return our decorator 
     // function instead of the original 
     descriptor.value = function decorated(...args) { 
      // Do something before ... 
      console.log('before: ' + name, this.props, args); 

      if (config.someOption) { 
       // Do something based on the config 
      } 

      // Calling the decorated method on this object 
      // with some arguments that could have been 
      // augmented by this decorator 
      decoratee.apply(this, args); 

      // Do something after ... 
      console.log('after: ' + name); 
     }; 
    }; 
} 

はここで徹底的にこのより実証an example that also modifies the behavior of a methodです：あなたが飾られている実際の関数であるdescriptor.valueを変更する必要がどのようなデコレータは、実行時にやっている影響を受けて。

これが役に立ちます。ハッピーコーディング！

EDIT：コメンターが指摘したように、デコレータはES7の一部ではないが、2016年3月the proposal is still in Stage 1のように、