Comment appliquer conditionnellement les attributs de classe dans React ?

Application conditionnelle des attributs de classe dans React

Problème

Vous essayez d'afficher ou de masquer de manière conditionnelle un groupe de boutons en fonction d'un accessoire transmis par un composant parent. Cependant, la logique conditionnelle au sein de l'attribut de classe provoque le comportement attendu.

Solution

Pour appliquer correctement les attributs de classe de manière conditionnelle dans React, assurez-vous que les accolades entourant la logique conditionnelle sont en dehors de la chaîne. .

<div className={"btn-group pull-right " + (this.props.showBulkActions ? 'show' : 'hidden')}>

Dans le code corrigé :

• Les accolades sont à l'extérieur de la chaîne, donc la logique conditionnelle est évaluée à l'intérieur de la chaîne.
• Les parenthèses autour de la logique conditionnelle sont nécessaires pour assurer une bonne exécution.
• Un espace est ajouté après "pull-right" pour éviter de fournir accidentellement la classe "pull-rightshow" au lieu de "pull-right show".

Avec ces ajustements, les attributs de classe conditionnels fonctionneront comme prévu, affichant ou masquant le groupe de boutons en fonction de la valeur de la prop showBulkActions.

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!