Comment implémenter correctement le rendu de classe conditionnel dans React ?

Rendu conditionnel des attributs de classe dans React

Dans React, afficher ou masquer sous condition des éléments en fonction des accessoires reçus d'un composant parent est une pratique courante cas d'utilisation. Dans l'extrait de code donné, l'auteur vise à masquer ou à afficher un groupe de boutons en fonction de la valeur de la prop showBulkActions.

Le problème est que les accolades { } utilisées pour le rendu conditionnel sont placées dans la chaîne pour l'attribut className. Cela interprète la chaîne entière comme une valeur statique, ce qui n'entraîne aucun rendu conditionnel réel.

Solution :

Pour appliquer conditionnellement des attributs de classe basés sur un accessoire, les accolades doit être placé en dehors de la chaîne, entourant la condition logique et déterminant les noms de classe. Le code suivant illustre l'approche correcte :

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

Explication :

• Le nom de classe est maintenant entre accolades.
• Le la condition logique (this.props.showBulkActions ? 'show' : 'hidden') est évaluée à 'show' si this.props.showBulkActions est vrai, et « caché » s'il est faux.
• L'espace après « pull-right » garantit que « pull-rightshow » ne sera pas involontairement appliqué en tant que classe.
• Les parenthèses sont cruciales pour une bonne évaluation de l'expression ternaire.

En suivant ces corrections, le groupe de boutons devrait apparaissent ou disparaissent désormais sous condition en fonction de la prop showBulkActions du composant parent.

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!