Comment puis-je ajouter dynamiquement des classes aux composants React ?

Amélioration dynamique des noms de classe dans React

Dans React, il est souvent nécessaire d'ajouter dynamiquement une classe à un ensemble de noms de classe prédéfinis. Babel fournit une solution pratique pour ce scénario.

Réaliser un ajout de classe dynamique

Pour ajouter une classe dynamique à une liste de classes régulières, vous pouvez utiliser l'approche suivante dans JSX :

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

Ce fragment de code concatène la chaîne littérale "wrapper searchDiv" avec la valeur de this.state.something pour créer le className. Alternativement, vous pouvez utiliser un modèle de chaîne :

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

Ces deux solutions reposent sur le fait que dans JSX, tout ce qui est placé entre accolades est exécuté en tant que JavaScript. En tant que tel, vous avez la possibilité de générer dynamiquement des noms de classe à l'aide de variables ou de valeurs d'état.

Remarque importante

Bien qu'il soit tentant de combiner des chaînes JSX et des accolades pour les attributs, il est important d'éviter cela pratique. Seul JavaScript est autorisé entre accolades dans JSX.

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!