Comment ajouter dynamiquement des classes pour réagir aux éléments à l'aide de Babel ?

Ajout de classe dynamique dans Babel

Lorsque vous travaillez avec du contenu dynamique, il devient souvent nécessaire d'ajouter des classes supplémentaires aux éléments. Dans les applications React utilisant Babel, cela peut être réalisé via l'attribut className.

Question :

Comment une classe dynamique peut-elle être ajoutée à une liste de classes existantes ? Par exemple, un composant React avec un nom de classe de « wrapper searchDiv » doit être mis à jour dynamiquement vers « wrapper searchDiv {this.state.something} ».

Réponse :

Il existe deux approches pour y parvenir :

1. Méthode JavaScript traditionnelle :

Ajoutez la classe supplémentaire dans l'attribut className à l'aide de JavaScript, comme ceci :

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

2. Méthode de modèle de chaîne :

Utilisez des backticks pour créer un modèle de chaîne, ce qui permet un code plus propre et plus concis :

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

Dans les deux méthodes, les accolades contiennent du code JavaScript, permettant la modification des chaînes et l'ajout de valeurs dynamiques. Cependant, il est important de noter que la combinaison de chaînes JSX et d'accolades dans les attributs n'est pas prise en charge.

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!