Wie überschreiben Sie eine übergeordnete Klassenmethode in Reagieren?

Question

Ich erweitere eine Basisklasse und überschreibe eine Methode in der Basisklasse. Aber wenn ich es anrufe, ruft es die Superklassenversion auf. Wie überschreibe ich die Methode?

var Hello = React.createClass({ 

     getName: function() { return "super" }, 

     render: function() { 

      return <div>This is: {this.getName()}</div>; 
     } 
    }); 

    class HelloChild extends Hello { 
     constructor(props) { 
      super(props); 

      console.log(this.getName()); 
     } 
     getName() 
     { 
      return "Child"; 
     } 
    }; 

ich es: „Das ist: Child“ drucken möchten, aber es druckt „Das ist: super“

Answer 1

ich die Antwort gefunden (von hier angepasst: https://gist.github.com/Zodiase/af44115098b20d69c531) - die Basisklasse auch sein muss definiert in einer ES6 Weise:

class Hello extends React.Component { 

     //abstract getName() 
     getName() 
     { 
      if (new.target === Hello) { 
       throw new TypeError("method not implemented"); 
      } 
     } 

     render() { 

      return <div>This is: {this.getName()}</div>; 
     } 
    }; 

Answer 2

Bitte beachten Sie, dass diese Antwort anderen Ansatz schlägt vor:

ich frage mich, warum diese in erster Linie tun sollte, mein Punkt ist, dass Die direkte Kopplung von zwei reaktiven Komponenten ist kein richtiger Weg, die Wiederverwendbarkeit in React zu implementieren.

Wenn Sie versuchen, mehrere untergeordnete Komponenten zu haben, die ein Elternteil erweitern, würde ich tun, untergeordnete Komponenten und eine Komponente höherer Ordnung zu haben und dann allgemeine Funktionalität mit Composition implementieren. Auf diese Weise können Sie diese Methoden überspringen, die Sie überschreiben wollten, und so blieb alles klar.

Answer 3

Das Problem ist, dass Sie ES6-Klassen-Deklaration (zB Hello) mit alten Schule Javascript-Deklaration (ex. HelloChild) mischen. Um HelloChild zu reparieren, binden Sie die Methode an die Klasse.

class HelloChild extends Hello { 
    constructor(props) { 
     super(props); 

     this.getName = this.getName.bind(this); // This is important 

     console.log(this.getName()); 
    } 

    getName() 
    { 
     return "Child"; 
    } 
}; 

Dann wird es funktionieren.

Answer 4

Eigentlich können Sie Methode überschreiben Code aus Ihrer Unterklasse auszuführen

class Hello extends React.Component { 
getName() { 
super.getName(); 
} 
} 


class HelloChild extends Hello { 
getName() 
    { 
     return "Child"; 
    } 
}