Les fonctions fléchées peuvent-elles lier de manière permanente les méthodes de classe dans les composants ES6 React ?

Utiliser les fonctions fléchées comme méthodes de classe avec ES6

Dans le développement d'applications React avec des classes ES6, la liaison des méthodes à l'objet actuel était une pratique courante dans le passé. Cependant, les fonctions fléchées peuvent-elles être utilisées pour lier de manière permanente des fonctions de classe à une instance, en particulier pour les fonctions de rappel ?

Tentative de syntaxe des fonctions fléchées

Auparavant, on liait des méthodes en utilisant une syntaxe telle que :

class SomeClass extends React.Component {
  constructor(){
    this.handleInputChange = this.handleInputChange.bind(this)
  }
}

Tenter d'utiliser les fonctions fléchées à la place :

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

entraîne erreurs.

Syntaxe correcte

La syntaxe d'utilisation des fonctions fléchées comme méthodes de classe est légèrement différente. Un signe égal est nécessaire après le nom de la propriété :

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

Activation des fonctionnalités expérimentales

Cette fonctionnalité est expérimentale et nécessite le plugin Babel transform-class-properties pour être compilé :

{
  "plugins": [
    "transform-class-properties"
  ]
}

Installer le plugin via npm :

npm install --save-dev babel-plugin-transform-class-properties

Utilisation

Avec fonctionnalités expérimentales activées, le passage de SomeClass.handleInputChange en tant que fonction de rappel sera limité à l'instance de classe, et non à l'objet fenêtre.

Pour plus d'informations, reportez-vous à la proposition relative aux champs de classe et aux propriétés statiques.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!