Comment puis-je ajouter dynamiquement des classes aux noms de classes statiques dans JSX ?

Ajout dynamique de classes aux noms de classes manuels dans JSX

Dans JSX, nous devons souvent ajouter dynamiquement des classes à des éléments en fonction de certaines conditions. Cela nécessite de manipuler la propriété className pour inclure les noms de classe statiques et dynamiques. Voici comment y parvenir :

Utilisation de la syntaxe JavaScript

Vous pouvez utiliser la syntaxe JavaScript normale pour ajouter des classes dynamiques aux noms de classes manuels :

className={'wrapper searchDiv ' + this.state.something}

Cela concatènera les noms de classe statiques "wrapper" et "searchDiv" avec le nom de classe dynamique déterminé par la propriété state this.state.something.

Utilisation de modèles de chaînes

Vous pouvez également utiliser des modèles de chaînes (littéraux de modèles ES6) avec des backticks :

className={`wrapper searchDiv ${this.state.something}`}

Cette syntaxe permet d'interpoler des expressions JavaScript directement dans la chaîne, y compris la classe dynamique noms.

Remarque :

N'oubliez pas que tout ce qui est placé entre accolades dans JSX est interprété comme du code JavaScript. Par conséquent, vous pouvez exécuter une logique complexe et manipuler des chaînes selon vos besoins dans l'attribut className. Cependant, vous ne pouvez pas combiner des chaînes JSX et des accolades directement dans les attributs.

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!