Maison > interface Web > tutoriel CSS > Comment puis-je ajouter dynamiquement plusieurs classes à un composant ReactJS ?

Comment puis-je ajouter dynamiquement plusieurs classes à un composant ReactJS ?

Linda Hamilton
Libérer: 2024-11-17 08:54:04
original
981 Les gens l'ont consulté

How Can I Dynamically Add Multiple Classes to a ReactJS Component?

Ajout dynamique de plusieurs classes à un composant ReactJS

Lorsque vous travaillez avec ReactJS, vous pouvez rencontrer le besoin d'ajouter plusieurs classes au nom de classe d'un élément attribut. Pour éviter les erreurs potentielles ou la confusion, les littéraux de modèle ES6 fournissent une solution élégante.

Pour y parvenir, utilisez les littéraux de modèle pour entourer les noms de classe entre des guillemets (`) et les concaténer à l'aide de l'opérateur " ". Par exemple :

const className = `class1 class2 class3`;
Copier après la connexion

Dans votre cas, vous pouvez modifier la méthode de rendu de votre composant AccountMainMenu pour utiliser des littéraux de modèle :

render() {
  var self = this;
  // ...

  return (
    <div className="acc-header-wrapper clearfix">
      <ul className="acc-btns-container">
        {accountMenuData.map(function(data, index) {
          var activeClass = "";

          if (self.state.focused == index) {
            activeClass = "active";
          }

          const className = `${activeClass} ${data.class} main-class`;

          return (
            <li
              key={index}
              className={className}
              onClick={self.clicked.bind(self, index)}
            >
              <a href="#" className={data.icon}>
                {data.name}
              </a>
            </li>
          );
        })}
      </ul>
    </div>
  );
}
Copier après la connexion

Cette approche garantit que plusieurs classes sont correctement ajoutées à l'attribut className sans avoir besoin de manipulations de chaînes complexes ou d'erreurs potentielles.

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!

Déclaration de ce site Web
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn
Derniers articles par auteur
Tutoriels populaires
Plus>
Derniers téléchargements
Plus>
effets Web
Code source du site Web
Matériel du site Web
Modèle frontal