Reaktif Bileşenli Dekoratörler

Question

@myDecorator sözdizimini kullanma (babel kullanarak) konusunda çok heyecanlıyım. Yaşam döngüsü işlevlerinden birini, özellikle componentWillMount'u dekore etmeye çalışıyorum ve dekoratördeki bileşenin props ve context'unu kontrol edin. Ancak, props veya context erişemiyor gibi görünüyor. Bunun bir anti-pattern mi, yoksa sadece yanlış mı gideceğinden emin değilim.

Küçük Örnek:

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

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

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

ve

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

Ben de dekoratör ve this kontrol için ok fonksiyonları denedi ama dekoratörler bu şekilde çalışmak şeyler oluşturmak sanmıyorum.

Ayrıca, dekoratörümü bir fabrika oluşturup this.props ve this.context'dan geçirmeyi denedim, ancak bir bileşen ömrü döngüsü işlevi oluştururken this tanımsızdır.

Answer 1

ES7 ECMAScript Dekoratörler böylece target parametre Sınıfınız dekoratör uygulandığı zamanda the same API as Object.defineProperty(target, name, descriptor) var, zamanda React tarafından çağrılan değil.

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

İşte iyice bu daha gösteriyor an example that also modifies the behavior of a method: sen süslüdür gerçek işlevdir descriptor.value değiştirmek için ne dekoratör zamanında yapıyor etkilemek için.

Bu yardımcı olur umarım. Mutlu kodlar!

DÜZENLEME: Bir yorumcu belirttiği gibi, dekoratörler ES7 parçası değildir ama Mart 2016 the proposal is still in Stage 1, itibariyle benim kötü