Comment puis-je appliquer conditionnellement des attributs de classe dans React ?

Appliquer conditionnellement les attributs de classe dans React

Dans React, il est courant d'afficher ou de masquer des éléments en fonction des accessoires transmis par les composants parents. Pour y parvenir, vous pouvez appliquer conditionnellement des classes CSS. Cependant, un problème potentiel survient lors de l'utilisation de la syntaxe {this.props.condition ? 'show' : 'hidden'} directement dans une chaîne.

Pour résoudre ce problème, déplacez les accolades à l'extérieur de la chaîne, comme le montre cet exemple corrigé :

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

Ceci L'ajustement garantit que la condition est évaluée avant de concaténer les noms de classe. Notez l'espace après "pull-right" pour éviter de créer accidentellement la classe "pull-rightshow" au lieu de la classe "pull-right show" prévue. De plus, les parenthèses sont cruciales pour une évaluation correcte.

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!