Korrekter Weg zu erben React Komponenten

Question

Ich verstehe, dass meine Frage ein wenig voreingenommen ist, aber ich bin sehr neu in Javascript und prototypes, und ich lese darüber, aber ich verstehe nicht wirklich, wie diese Techniken auf meine Anwendung praktische Probleme. Ein Beispiel wäre also sehr hilfreich. Also ich habe eine React Komponente, das sieht im Grunde wie folgt aus:

var Component1 = React.createClass({ 

getInitialState: function() { 
     return ({ 
      searchable: true, 
     }) 
    }, 

function1: function() { 
     return ({ 
      somevalue 
     }) 
    }, 

render: function() { 

     var redText = { 
      color: 'red' 
     }; 

     var redBorder = { 
      color: 'red', 
      border: '1px solid red' 

     }; 

     return (
       <form> 
        <div> 
         <a onClick={this.props.handleAddClick}>Something</a> 
        </div> 

        <div> 
         <label>Some label</label> 
         <input type="text"/> 
        </div> 
       </form>) 
}); 

Ich habe Component2 auch die im Grunde absolut die gleiche ist, hat aber einen zusätzlichen <input/> innerhalb des return seiner render Funktion.

Ich habe auch Component3, die die gleichen Funktionen teilt, aber hat unterschiedliche render() Funktion.

Also, wie Vererbung hier anwenden und Copy-Paste 3 Mal vermeiden? Ich vermisse einfach eine praktische Illustration, also würde ich es begrüßen.

Edit1____________________________________________________ Also habe ich versucht Prototype Erbe nach der ersten Antwort zu implementieren, aber es scheint nicht reagiert, diese Funktionen sehen: getInitialState() ist null, der Anfangszustand ist null nach dem Rendern. Was ist falsch an diesem Ansatz?

Ich versuchte auch nach dem Lehrbuch zu gehen und tat

function MyPrototype() {}; 
MyPrototype.prototype.getInitialState = function() { 
    return ({ 
     someProperty: true; 
    }) 
}; 

function Component1() {}; 
Component1.prototype = Object.create(MyPrototype.prototype); 
Component1.prototype.render = function() { 
    console.log(this); 
    return (<div></div>)}; 

var MyComponent1 = React.createClass(new Component1()); 

Aber wenn ich meinen Browser zu öffnen, bekomme ich einen Fehler: Uncaught Invariant Violation: createClass(...): Class specification must implement a machen method.

Was ich auf diese Weise falsch mache?

Edit2_______________________________________________

Eigentlich sehe ich das nicht reagiert Mixins weder Prototypen unterstützen. Die Zusammensetzung sollte stattdessen verwendet werden. Es wird in diesem Artikel erläutert: Dan Abramov's article Mixins Are Dead. Long Live Composition

Answer 1

In Reaktion, die Vererbung für Komponenten ist stark entmutigt.
React ist viel besser geeignet, um die gleichen Beziehungen über die Zusammensetzung auszudrücken. Hier

ist ein Beispiel für Zusammensetzung mit:

class Button extends Component { 
    render() { 
    return (
     <div className='Button' style={{ color: this.props.color }}> 
     {this.props.children} 
     </div> 
    ) 
    } 
} 

class DeleteButton extends Component { 
    render() { 
    return (
     <Button color='red'>Delete</Button> 
    ) 
    } 
} 

Beachten Sie, wie DeleteButton verwendet das Look and Feel von Buttonohne von ihm zu erben. Stattdessen definiert Button seine konfigurierbaren Teile über props, und DeleteButton liefert diese Requisiten. Im tatsächlichen DOM würden sowohl <Button /> als auch <DeleteButton /> zu einem einzigen DOM-Knoten gerendert werden - die rekursive Auflösung geschieht unter der render() Zeit, und dies ist die Kernidee von React.

In der Tat, wenn Sie nicht Lifecycle Haken oder lokalen Zustand benötigen, können Sie auch Komponenten als Funktionen definieren:

function Button({ color, children }) { 
    return (
    <div className='Button' style={{ color }}> 
     {children} 
    </div> 
) 
} 

function DeleteButton() { 
    return (
    <Button color='red'>Delete</Button> 
) 
} 

Sie auch Klassen mit Funktionen mischen. Dies wäre mit der Vererbung unmöglich, funktioniert aber hervorragend mit der Komposition.

Wie für Ihre speziellen Anwendungsfälle:

I also have Component2 which is basically absolutely the same, but has one additional <input/> inside the return of its render function.

können Sie haben Ihre Component1this.props.children akzeptieren und sie in dem Rückgabewert von render() Methode verwenden, und haben Component2 zu <Component1><input /></Component> machen. Dies ist sehr ähnlich zu dem, was ich oben gezeigt habe. Sie müssen auch nicht die Property children verwenden - Sie können ein React-Element in einer beliebigen Prop, z. <Component1 footer={<input />} />, und dann können Sie this.props.footer innerhalb Component1 verwenden.

I also have Component3 , which shares same functions, but has different render() function.

Wenn sie einen anderen Code (beispielsweise Dienstprogramme, die einige Daten berechnen) teilen, bewegen, dass Code außerhalb Komponenten in einem gemeinsamen Modul, und Importieren von beiden Komponenten.

Wenn sie eine beliebige Benutzeroberfläche teilen, extrahieren Sie sie in eine weitere Komponente und verwenden Sie sie von beiden Komponenten.