Comment ajouter plusieurs classes à un composant ReactJS avec des littéraux de modèle ?

Ajout de plusieurs classes aux composants ReactJS à l'aide de littéraux de modèle

Pour ajouter plusieurs classes à un composant dans ReactJS, vous pouvez utiliser les littéraux de modèle ES6. Cette méthode fournit un moyen concis et efficace de combiner des chaînes et des variables en une seule expression.

Étape 1 : Définir les variables de classe

Dans la méthode de rendu de votre composant, définissez un variable pour stocker les classes que vous souhaitez ajouter. Par exemple :

const activeClass = this.state.focused === index ? 'active' : '';

Cette variable définit de manière conditionnelle la classe « active » en fonction de l'état du composant.

Étape 2 : Utiliser les littéraux de modèle pour combiner les classes

Les littéraux de modèle vous permettent d'utiliser des backticks (`) pour créer des chaînes multilignes. Dans la chaîne, intégrez les variables de classe en utilisant la syntaxe ${}.

const classes = `${activeClass} data.class main-class`;

Cette ligne concatène les variables 'activeClass', 'data.class' et 'main-class' en une seule chaîne.

Étape 3 : Attribuer à l'attribut className

Dans l'élément JSX, attribuez la variable 'classes' à l'attribut 'className'. Cela appliquera toutes les classes à l'élément.

<li key={index} className={classes}>...</li>

Solution One-Liner

Vous pouvez combiner ces étapes en une seule ligne en utilisant la version one-liner :

const classes = `form-control round-lg ${this.state.valid ? '' : 'error'}`;

où 'this.state.valid' est une variable d'état qui ajoute conditionnellement la classe 'error'.

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!