Ist es eine gute Übung, Basiskomponenten zu erstellen und sie dann in React zu erweitern?

Question

Ich lerne gerade React und ich schreibe Komponenten mit ES7-Syntax. Meine Idee ist es, eine Basiskomponente zu erstellen, die einige Methoden enthält, die alle abgeleiteten Komponenten haben sollen. Zum Beispiel möchte ich valueLink without the mixin implementieren, für die Zwei-Wege-Bindung in allen meinen Komponenten. Hier ist meine Idee:

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

Und es funktioniert gut. Ich konnte jedoch nicht viele Informationen über diese Methode finden. Es geht nicht um ValueLink, das war nur ein Beispiel. Die Idee ist, einige Methoden in einer Basiskomponente zu haben und diese Komponente später zu erweitern, so dass abgeleitete Komponenten alle diese Methoden haben, wie die übliche OOP-Methode. Also würde ich gerne wissen, ob das vollkommen in Ordnung ist oder ob mir ein paar Fehler bekannt sind. Vielen Dank.

Answer 1

Das ist völlig in Ordnung, es ist nur grundlegende Vererbung. Der Nachteil der Verwendung von Vererbung zum Ersetzen von Mixins besteht darin, dass es keine Mehrfachvererbung gibt. Daher können Sie Ihren TextBox-Funktionen nicht mehrere Basisklassen zuweisen, als würden Sie mehrere Mixins eingeben. Um dies zu umgehen, können Sie component composition verwenden. In Ihrem Fall funktioniert die Komposition nicht direkt wie im Beispiel definiert, aber es gibt einen Workaround.

Zuerst müssen Sie eine Komposition Komponente

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 
} 

definieren und Sie dann Ihre Komponente definieren, wo Sie einige gemeinsame Merkmale benötigen

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) 

ich nicht getestet haben, aber es sollte funktionieren.