Comment appliquer conditionnellement des attributs de classe dans React ?

Application conditionnelle d'attributs de classe dans React

Lors du développement d'applications React, vous pouvez rencontrer des scénarios dans lesquels vous devez afficher ou masquer dynamiquement des éléments en fonction de accessoires transmis par les composants parents. Un problème courant qui se pose est l'application conditionnelle des attributs de classe.

Une approche consiste à utiliser la syntaxe de rendu conditionnel, dans laquelle vous enveloppez l'élément entre accolades et fournissez une expression logique qui détermine s'il doit être restitué. Cependant, lorsqu'il s'agit d'attributs de classe, une approche différente est requise.

Dans l'exemple fourni, l'objectif est d'afficher un groupe de boutons de manière conditionnelle en fonction d'un accessoire showBulkActions. Le code tente de restituer le groupe de boutons comme ceci :

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

Cependant, rien ne se passe car les accolades sont placées dans la chaîne. Pour résoudre ce problème, les accolades doivent être placées à l'extérieur de la chaîne :

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

Cela garantit que la condition est évaluée avant que la chaîne ne soit affectée à l'attribut className. De plus, assurez-vous qu'il y a un espace avant l'expression conditionnelle pour éviter une concaténation de classes involontaire.

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!