Heim >Web-Frontend >js-Tutorial >Können Pfeilfunktionen Klassenmethoden in ES6-Reaktionskomponenten dauerhaft binden?

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

Mary-Kate Olsen
Mary-Kate OlsenOriginal
2024-12-10 03:42:16738Durchsuche

Can Arrow Functions Permanently Bind Class Methods in ES6 React Components?

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!

Stellungnahme:
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn