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

Comment utiliser les fonctions fléchées dans les classes ES6 comme méthodes de classe

Lors de l'intégration initiale des classes ES6 dans React, il était courant de lier une instance méthodes explicitement (comme démontré dans l’exemple ci-dessous). Cependant, une question clé se pose : est-il possible avec ES6 de lier de manière permanente des fonctions de classe à une instance de classe à l'aide de fonctions fléchées, simplifiant ainsi leur utilisation comme rappels ?

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

CoffeeScript propose cette fonctionnalité, mais on ne sait pas si quelque chose de similaire peut être réalisé dans ES6.

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

Cette question cherche à comprendre si les fonctions fléchées peuvent être liées de manière permanente aux instances de classe dans ES6, leur permettant d'être sans effort utilisées comme fonctions de rappel, garantissant le contexte correct lorsqu'elles sont transmises à des fonctions telles que setTimeout.

Solution : correction de la syntaxe

La tentative originale de définir une méthode de classe à l'aide d'une flèche La fonction contient une erreur de syntaxe mineure. La syntaxe correcte est indiquée ci-dessous :

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

Il est important de noter que cette syntaxe nécessite l'activation de fonctionnalités expérimentales dans Babel pour une compilation réussie. En installant le plugin nécessaire (transform-class-properties), vous pouvez activer ces fonctionnalités expérimentales.

De plus, vous pouvez trouver une discussion complète sur les champs de classe et les propriétés statiques dans la documentation officielle de la proposition.

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!