Comment appliquer conditionnellement des attributs de classe dans React sans problèmes d'interpolation de chaînes ?

Application conditionnelle d'attributs de classe dans React

Dans React, l'application dynamique d'attributs de classe basés sur des accessoires peut être utile pour afficher ou masquer des éléments de manière conditionnelle. Cependant, un problème courant est que les accolades utilisées pour les vérifications conditionnelles peuvent être interprétées à tort comme une interpolation de chaîne.

Question :

Un utilisateur tente d'afficher un groupe de boutons de manière conditionnelle. basé sur un accessoire d'un composant parent. L'extrait de code est le suivant :

<div classname="btn-group pull-right {this.props.showBulkActions ? 'show' : 'hidden'}">
<p>Le problème est que les accolades sont évaluées comme une chaîne et rien n'est affiché.</p>
<p><strong>Réponse :</strong></p>
<p>Le problème réside dans le mauvais placement des accolades dans la chaîne. Pour évaluer correctement l'instruction conditionnelle, les accolades doivent être placées à l'extérieur de la chaîne :</p>
<pre class="brush:php;toolbar:false"><div classname='{"btn-group' pull-right :>
<p>Cela garantit que l'instruction conditionnelle est évaluée en premier et que le résultat est concaténé avec la chaîne de classe. Notez que l'espace après « pull-right » est important pour éviter de combiner accidentellement des classes (par exemple, « pull-rightshow » au lieu de « pull-right show »). De plus, des parenthèses sont nécessaires pour garantir une évaluation correcte.</p>
<p>En effectuant cet ajustement, le groupe de boutons apparaîtra ou disparaîtra désormais comme prévu en fonction de la valeur de la prop showBulkActions du composant parent.</p>
</div>