Heim >Web-Frontend >js-Tutorial >Können Pfeilfunktionen Klassenmethoden in ES6-Reaktionskomponenten dauerhaft binden?
Bei der Entwicklung von React-Anwendungen mit ES6-Klassen war das Binden von Methoden an das aktuelle Objekt in der Vergangenheit eine gängige Praxis. Können Pfeilfunktionen jedoch verwendet werden, um Klassenfunktionen dauerhaft an eine Instanz zu binden, insbesondere für Callback-Funktionen?
Früher hat man Methoden mit einer Syntax wie der folgenden gebunden:
class SomeClass extends React.Component { constructor(){ this.handleInputChange = this.handleInputChange.bind(this) } }
Der Versuch, stattdessen Pfeilfunktionen zu verwenden:
class SomeClass extends React.Component { handleInputChange (val) => { console.log('selectionMade: ', val); } }
führt zu: Fehler.
Die Syntax für die Verwendung von Pfeilfunktionen als Klassenmethoden ist etwas anders. Nach dem Eigenschaftsnamen ist ein Gleichheitszeichen erforderlich:
class SomeClass extends React.Component { handleInputChange = (val) => { console.log('selectionMade: ', val); } }
Diese Funktion ist experimentell und erfordert zum Kompilieren das Transform-Class-Properties-Babel-Plugin:
{ "plugins": [ "transform-class-properties" ] }
Installieren Sie das Plugin über npm:
npm install --save-dev babel-plugin-transform-class-properties
Wenn experimentelle Funktionen aktiviert sind, wird die Übergabe von SomeClass.handleInputChange als Rückruffunktion auf die Klasseninstanz und nicht auf das Fensterobjekt beschränkt.
Weitere Informationen finden Sie im Vorschlag für Klassenfelder und statische Eigenschaften.
Das obige ist der detaillierte Inhalt vonKönnen Pfeilfunktionen Klassenmethoden in ES6-Reaktionskomponenten dauerhaft binden?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!