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

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`;

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>
  );
}

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!