Comment appliquer conditionnellement des attributs de classe dans React : Pourquoi la bascule de visibilité de mon groupe de boutons ne fonctionne-t-elle pas ?

Application conditionnelle des attributs de classe dans React

Conceptuellement, le rendu conditionnel des éléments est un cas d'utilisation courant dans React. Cependant, la question se pose lorsqu’on considère les attributs de classe. Cet article explique comment appliquer conditionnellement des attributs de classe, à l'aide d'un exemple pratique :

Question :

Un utilisateur tente de modifier la visibilité d'un groupe de boutons en fonction d'un valeur booléenne transmise par un composant parent. Cependant, l'attribut de classe n'est pas évalué correctement.

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

Réponse :

Le problème réside dans le placement des accolades entourant l'expression. Au lieu d'être à l'intérieur de la chaîne, ils doivent être à l'extérieur, avec les parenthèses, comme suit :

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

En plaçant les accolades à l'extérieur de la chaîne, l'expression est évaluée comme du code JavaScript plutôt que comme une chaîne statique. . Cela permet d'appliquer la classe correcte en fonction de la valeur booléenne de this.props.showBulkActions.

De plus, un espace est ajouté après "pull-right" pour garantir que l'attribut de classe est correctement appliqué. Sans l'espace, le risque de créer une classe invalide, telle que « pull-rightshow » au lieu de « pull-right show », est présent.

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!