Temel bileşenler oluşturmak ve daha sonra bunları React içinde genişletmek iyi bir uygulamadır mı?

Question

Sadece öğreniyorum React ve ben ES7 sözdizimini kullanarak bileşenler yazıyorum. Benim fikrim, tüm türetilmiş bileşenlerin sahip olmasını istediğim bazı yöntemleri içerecek bir temel bileşen oluşturmaktır. Örneğin, tüm bileşenlerimde iki yönlü bağlantı için valueLink without the mixin'u uygulamak istiyorum. İşte benim fikirdir:

class MyComponent extends React.Component { 

    bindTwoWay(name) { 
     return { 
      value: this.state[name], 
      requestChange: (value) => { 
       this.setState({[name]: value}) 
      } 
     } 
    }; 
} 

 

class TextBox extends MyComponent { 
    state = { 
     val: '' 
    }; 

    render() { 
     return (<div> 
      <input valueLink={this.bindTwoWay('val')}/> 
      <div>You typed: {this.state.val}</div> 
     </div>) 
    } 
} 

Ve sadece iyi çalışır. Ancak, bu yöntem hakkında fazla bilgi bulamadık. Bu değerLinkle ilgili değil, bu sadece bir örnek. Buradaki fikir, bir temel bileşende bazı yöntemlere sahip olmak ve daha sonra bu bileşeni genişletmek, böylece türetilen bileşenlerin olağan OOP yolu gibi tüm bu yöntemlere sahip olması. Bu yüzden, bunun gayet iyi olup olmadığını veya farkında olmadığım bazı kusurlar olduğunu bilmek isterim. Teşekkürler.

Answer 1

Bu tamamen iyi, sadece temel miras. Miksleri değiştirmek için miras kullanma konusundaki ihtar, birden fazla kalıtımın olmamasıdır, bu yüzden birden fazla karıĢım verdiğinizde, TextBox özelliklerinizi çoklu temel sınıflarına veremezsiniz. Bunu aşmak için component composition'u kullanabilirsiniz. Durumunuzda, örnekte tanımladığınız gibi doğrudan çalışmaz, ancak bunun için bir geçici çözüm vardır.

Önce bir beste bileşenini

export default (ComposedComponent) => { 
    class MyComponent extends React.Component { 
    constructor(props, state) { 
     super(props, state); 
     this.state = { 
     val: '' 
     }; 
    } 
    bindTwoWay(name) { 
     return { 
     value: this.state[name], 
     requestChange: (value) => { 
      this.setState({[name]: value}) 
     } 
     }; 
    } 

    render() { 
     return (
     <ComposedComponent 
      {...this.props} 
      {...this.state} 
      bindTwoWay={this.bindTwoWay.bind(this)} 
     /> 
     } 
    } 
    } 

    return MyComponent 
} 

tanımlamanız gerekir Ve sonra ben bunu test edemedim

import compose from 'path-to-composer'; 

class TextBox extends React.Component { 
    render() { 
    return (
     <div> 
     <input valueLink={this.props.bindTwoWay('val')}/> 
     <div>You typed: {this.props.val}</div> 
     </div> 
    ) 
    } 
} 

export default compose(TextBox) 

bazı ortak özelliklere gereken yere size bileşeni tanımlamak ama çalışması gerekir.