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

Ajout de classes dynamiques aux noms de classes manuels

Dans le contexte du JSX basé sur JavaScript de Babel, vous pouvez rencontrer le besoin d'ajouter un fichier dynamique class à une liste de classes existantes. Voici comment y parvenir :

Deux approches principales :

JavaScript traditionnel :

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

Cette méthode combine concaténation de chaînes régulière pour ajouter le nom de la classe dynamique.

Modèle de chaîne Version :

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

Ici, les backticks sont utilisés pour créer un modèle de chaîne qui permet l'interpolation d'expressions JavaScript.

Considérations spécifiques à JSX :

Dans JSX, les accolades contiennent du code JavaScript, donc tout ce qu'elles contiennent sera exécuté. Cependant, une mise en garde se pose lors de la combinaison de chaînes JSX avec des accolades pour les attributs.

Alternatives :

Vous pouvez également utiliser le plugin transform-class-properties de Babel pour activer la classe cessions de propriété sous la forme :

class MyComponent {
  classes = 'wrapper searchDiv ' + this.state.something;
}

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!