Ich bin neu in der Verwendung von ES6-Klassen mit React. Zuvor habe ich meine Methoden an das aktuelle Objekt gebunden (siehe erstes Beispiel). Kann ich mit ES6 eine Klassenfunktion dauerhaft mit Pfeilen an eine Klasseninstanz binden? (Nützlich beim Übergeben als Rückruffunktion.) Ich erhalte Fehler, wenn ich versuche, sie so gut wie möglich mit CoffeeScript zu verwenden:
class SomeClass extends React.Component {
// Instead of this
constructor(){
this.handleInputChange = this.handleInputChange.bind(this)
}
// Can I somehow do this? Am i just getting the syntax wrong?
handleInputChange (val) => {
console.log('selectionMade: ', val);
}
Wenn ich SomeClass.handleInputChange
zum Beispiel an übergeben würde setTimeout
, würde dies auf die Klasseninstanz und nicht auf das window
Objekt beschränkt sein.
Antworten:
Ihre Syntax ist leicht falsch und es fehlt nur ein Gleichheitszeichen nach dem Eigenschaftsnamen.
Dies ist eine experimentelle Funktion. Sie müssen experimentelle Funktionen in Babel aktivieren, damit diese kompiliert werden können. Hier ist eine Demo mit aktiviertem Experiment.
Um experimentelle Funktionen in babel zu nutzen, können Sie hier das entsprechende Plugin installieren . Für diese spezielle Funktion benötigen Sie das
transform-class-properties
Plugin :Weitere Informationen zum Vorschlag für Klassenfelder und statische Eigenschaften finden Sie hier
quelle
=
beihandleInputChange =
Nein, wenn Sie gebundene, instanzspezifische Methoden erstellen möchten, müssen Sie dies im Konstruktor tun. Sie können jedoch dafür Pfeilfunktionen verwenden, anstatt
.bind
eine Prototypmethode zu verwenden:Es gibt einen Vorschlag, mit dem Sie
constructor()
die Zuweisung möglicherweise weglassen und die Zuordnung mit derselben Funktionalität direkt in den Klassenbereich einfügen können. Ich würde jedoch nicht empfehlen, diesen zu verwenden, da er sehr experimentell ist.Alternativ können Sie immer verwenden
.bind
, um die Methode für den Prototyp zu deklarieren und sie dann an die Instanz im Konstruktor zu binden. Dieser Ansatz bietet eine größere Flexibilität, da Sie die Methode von außerhalb Ihrer Klasse ändern können.quelle
Sie verwenden die Pfeilfunktion und binden sie auch im Konstruktor. Sie müssen also keine Bindung durchführen, wenn Sie Pfeilfunktionen verwenden
ODER Sie müssen eine Funktion nur im Konstruktor binden, wenn Sie die normale Funktion wie unten verwenden
Auch das direkte Binden einer Funktion in Render wird nicht empfohlen. Es sollte immer im Konstruktor sein
quelle
Ich weiß, dass diese Frage ausreichend beantwortet wurde, aber ich muss nur einen kleinen Beitrag leisten (für diejenigen, die die experimentelle Funktion nicht verwenden möchten). Aufgrund des Problems, mehrere Funktionsbindungen im Konstruktor binden zu müssen und es unordentlich aussehen zu lassen, habe ich eine Dienstprogrammmethode entwickelt, die nach dem Binden und Aufrufen im Konstruktor alle erforderlichen Methodenbindungen automatisch für Sie ausführt.
Angenommen, ich habe diese Klasse mit dem Konstruktor:
Es sieht chaotisch aus, nicht wahr? Jetzt habe ich diese Dienstprogrammmethode erstellt
Jetzt muss ich nur noch dieses Dienstprogramm importieren und meinem Konstruktor einen Aufruf hinzufügen, und ich muss nicht mehr jede neue Methode im Konstruktor binden. Der neue Konstruktor sieht jetzt sauber aus:
quelle
shouldComponentUpdate
undgetSnapshotBeforeUpdate