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

Pfeilfunktionen als Klassenmethoden mit ES6 verwenden

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?

Versuch der Pfeilfunktionssyntax

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.

Korrekte Syntax

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);
  }
}

Experimentelle Funktionen aktivieren

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

Verwendung

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!