Können ES6-Pfeilfunktionen Klassenmethoden in React dauerhaft binden?

So verwenden Sie Pfeilfunktionen in ES6-Klassen als Klassenmethoden

Bei der ersten Integration von ES6-Klassen in React war es üblich, Instanzen zu binden Methoden explizit (wie im Beispiel unten gezeigt). Es stellt sich jedoch eine zentrale Frage: Ist es mit ES6 möglich, Klassenfunktionen mithilfe von Pfeilfunktionen dauerhaft an eine Klasseninstanz zu binden und so ihre Verwendung als Rückrufe zu vereinfachen?

class SomeClass extends React.Component {
  // Bound method
  constructor() {
    this.handleInputChange = this.handleInputChange.bind(this);
  }
}

CoffeeScript bietet diese Funktionalität, es bleibt jedoch unklar, ob Etwas Ähnliches kann in ES6 erreicht werden.

class SomeClass extends React.Component {
  // Attempted arrow function binding
  handleInputChange(val) => {
    console.log('selectionMade: ', val);
  }
}

Diese Frage versucht zu verstehen, ob Pfeilfunktionen dauerhaft an Klasseninstanzen in ES6 gebunden werden können, was dies zulässt lassen sich mühelos als Callback-Funktionen verwenden und stellen den korrekten Kontext sicher, wenn sie an Funktionen wie setTimeout übergeben werden.

Lösung: Korrigieren der Syntax

Der ursprüngliche Versuch, eine Klassenmethode mithilfe einer zu definieren Die Pfeilfunktion enthält einen geringfügigen Syntaxfehler. Die korrekte Syntax ist unten dargestellt:

class SomeClass extends React.Component {
  handleInputChange = (val) => {
    console.log('selectionMade: ', val);
  }
}

Es ist wichtig zu beachten, dass diese Syntax für eine erfolgreiche Kompilierung die Aktivierung experimenteller Funktionen in Babel erfordert. Durch die Installation des erforderlichen Plugins (transform-class-properties) können Sie diese experimentellen Funktionen aktivieren.

Darüber hinaus finden Sie eine umfassende Diskussion zu Klassenfeldern und statischen Eigenschaften in der offiziellen Vorschlagsdokumentation.

Das obige ist der detaillierte Inhalt vonKönnen ES6-Pfeilfunktionen Klassenmethoden in React dauerhaft binden?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!