React

Question

'daki Yüksek Sipariş Bileşenlerine yöntemler ekleme Anlayışımdan, ReactJS'deki HO, dekore edilen bileşene aksesuarlar ekler. Ama ben de state üzerinde hareket edebilen yöntemler eklemek istiyorum. Örnek olarak, genellikle this.isMounted()'u kontrol etmeden genellikle this.setState'u aramam. Özünde, benim istediğim:

export default ComposedComponent => class BaseComponent extends React.Component { 
    static displayName = "BaseComponent"; 

    constructor(props) { 
     super(props); 
    } 

//------> I want this method to be available to any ComposedComponent 
//------> And it has to act upon the state of ComposedComponent 
    updateState(obj) { 
     if (this.isMounted() && obj) { 
      this.setState(obj); 
     } 
    } 

    render() { 
     return (

      <ComposedComponent {...this.props} {...this.state} /> 
     ) 
    } 
} 

benim bileşeni Home dekore etmek istediğini farz edelim. Ben de onu export default BaseComponent(Home) olarak iade ediyorum.

Ancak this.updateState sınıfı Home sınıfında mevcut değildir. Bunu nasıl çözebilirim?

Answer 1

Tamam, anladım. Bu konuda çok fazla zaman harcadım, bu yüzden bu cevabın da birilerine yardımcı olabileceğini umuyorum. Kısa cevap: dekoratörünüzdeki yöntemi props'a ekleyin, ardından dekore edilmiş sınıfınızın yapıcısına bağlayın. (Ben basitlik için ES7 kullanıyorum)

export default ComposedComponent => class BaseComponent extends React.Component { 
    static displayName = "BaseComponent"; 

    constructor(props) { 
     super(props); 
     // Note how I am adding this to state 
     // This will be passed as a prop to your composed component 
     this.state = { 
      updateState: this.updateState 
     } 
    } 


    updateState(obj) { 
     this.setState(obj); 
    } 

    render() { 
     return (

      <ComposedComponent {...this.props} {...this.state} /> 
     ) 
    } 
} 

Ve burada, bunu kullanan bir sınıfın bir örneğidir: Burada

kodudur

@BaseComponent 
class Home extends React.Component { 
    static displayeName = 'Home'; 

    constructor(props) { 
     super(props); 
     // And here I am binding to it 
     this.updateState = this.props.updateState.bind(this); 
    } 

    render() { 
     return (
      <div>Hi</div> 
     ) 
    } 
}