Comment déclarer des constantes dans les classes React ?

Lors du développement d'une application à l'aide de React, il est nécessaire de déclarer des constantes pour stocker des valeurs qui restent inchangées pendant toute la durée de vie du composant ou de l'application. Les constantes peuvent contribuer à améliorer la lisibilité du code, fournir un emplacement central pour la gestion des valeurs partagées et améliorer la maintenabilité. Dans cet article, nous explorerons comment déclarer des constantes dans les composants de la classe React.

Importer React

Tout d'abord, nous supposons que vous avez configuré votre environnement React et que vous disposez d'un composant de classe prêt à l'emploi. Avant de déclarer des constantes, assurez-vous d'avoir importé les bibliothèques nécessaires. Cela inclut l'importation de React, qui est la bibliothèque principale permettant de créer des interfaces utilisateur dans React.

import React from 'react';

Déclarez les constantes dans les composants de la classe React

Pour déclarer des constantes dans les composants de la classe React, vous avez deux options :

• Attributs de classe statique : Les attributs de classe statiques sont déclarés directement dans la définition de classe et sont accessibles sans créer d'instance de classe. Cette approche vous permet de définir des constantes partagées entre toutes les instances du composant.

Exemple

Dans l'exemple ci-dessous, nous déclarons une constante nommée MY_CONSTANT dans le constructeur de classe. Utilisez ensuite this.MY_CONSTANT pour accéder à la constante dans la méthode de rendu.

class MyComponent extends React.Component {
  static MY_CONSTANT = 'Hello, World!';

  render() {
    return <div>{MyComponent.MY_CONSTANT}</div>;
  }
}

Sortie

Hello, World!

• Variables au niveau de la classe : Les variables au niveau de la classe peuvent être déclarées dans le constructeur de classe. Contrairement aux propriétés de classe statiques, les variables de niveau classe sont spécifiques à chaque instance d'un composant. Cette méthode est utile lorsque vous avez besoin de constantes spécifiques à une instance.

Exemple

Dans l'exemple ci-dessous, nous déclarons une constante nommée MY_CONSTANT dans le constructeur de classe. Utilisez ensuite this.MY_CONSTANT pour accéder à la constante dans la méthode de rendu.

class MyComponent extends React.Component {
  constructor(props) {
    super(props);

    this.MY_CONSTANT = 'Hello, World!';
  }

  render() {
    return <div>{this.MY_CONSTANT}</div>;
  }
}

Sortie

Hello, World!

Utilisation de constantes dans les composants React

Après avoir déclaré des constantes dans un composant de classe React, vous pouvez les utiliser dans les méthodes du composant, les hooks de cycle de vie ou les modèles JSX. Voyons comment utiliser les constantes déclarées dans l'exemple suivant :

Exemple

Dans l'exemple ci-dessous, la constante MY_CONSTANT est accessible dans la méthode handleClick, qui se déclenche lorsque l'on clique sur le bouton. Cette constante est également rendue dans la balise

dans les modèles JSX.

class MyComponent extends React.Component {
  static MY_CONSTANT = 'Hello, World!';

  handleClick() {
    console.log(MyComponent.MY_CONSTANT);
  }

  render() {
    return (
      <div>
        <button onClick={this.handleClick}>Click Me</button>
        <p>{MyComponent.MY_CONSTANT}</p>
      </div>
    );
  }
}

Sortie

Conclusion

Dans cet article, nous avons expliqué comment déclarer des constantes dans les classes React. La déclaration de constantes dans les composants de la classe React permet de stocker des valeurs qui restent inchangées tout au long de la durée de vie du composant. Qu'elles utilisent des propriétés de classe statiques ou des variables au niveau de la classe, les constantes améliorent la lisibilité et la maintenabilité du code et fournissent un endroit central pour gérer les valeurs partagées

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!