Comment puis-je ajouter plusieurs classes à l'attribut className d'un composant ReactJS ?

Classes multiples dans les composants ReactJS : une solution détaillée

Lorsque vous travaillez avec ReactJS et JSX, l'ajout de plusieurs classes à l'attribut className d'un composant peut être une tâche commune. Cet article montre comment y parvenir avec les littéraux de modèle ES6, offrant une solution claire et concise.

Considérez l'extrait suivant :

<li key={index} className={activeClass, data.class, "main-class"}></li>

Ce code tente de concaténer plusieurs noms de classe dans le className. attribut, mais il les attribue de manière incorrecte en tant qu'arguments distincts à la propriété className. Au lieu de cela, nous devons utiliser des littéraux de modèle pour créer une chaîne contenant les classes souhaitées.

Voici le code révisé utilisant les littéraux de modèle ES6 :

<li key={index} className={`${activeClass} ${data.class} main-class`}></li>

En plaçant les noms de classe entre accolades à l’intérieur des backticks, nous pouvons les concaténer en une seule chaîne. La propriété className reçoit ensuite cette chaîne générée dynamiquement, garantissant que le composant possède toutes les classes spécifiées.

Une autre méthode pratique est la version à une ligne :

<li key={index} className={`form-control round-lg ${this.state.valid ? '' : 'error'}`}></li>

Nous utilisons une expression conditionnelle à l'intérieur des backticks pour basculer entre les classes en fonction d'une condition. Dans cet exemple, une classe « erreur » est ajoutée uniquement si la propriété d'état valide est fausse.

Ces techniques fournissent une solution simple et élégante pour ajouter plusieurs classes aux composants ReactJS, facilitant ainsi le style et l'amélioration du fonctionnalité de vos applications.

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!