Comment ajouter plusieurs classes aux composants ReactJS ?

Ajout de plusieurs classes aux composants ReactJS

Lorsque vous travaillez avec ReactJS et JSX, vous pouvez rencontrer des situations dans lesquelles vous devez appliquer plusieurs classes à un composant unique. Un scénario courant consiste à ajouter la classe active de manière conditionnelle lorsqu'un élément est sélectionné ou cliqué.

Dans votre exemple, vous essayez d'ajouter plusieurs classes à l'attribut className d'un élément li comme ceci :

<li key={index} className={activeClass, data.class, "main-class"}></li>

Cependant, cette approche utilise l'opérateur virgule, qui concatène uniquement les chaînes sans ajouter d'espaces. Pour ajouter correctement plusieurs classes, vous devez utiliser la fonctionnalité de littéraux de modèle ES6.

Dans votre composant AccountMainMenu, modifiez la méthode de rendu comme suit :

render: function() {
    // ... existing code

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

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

            return (
              <li
                key={index}
                className={`${activeClass} ${data.class} main-class`}
                onClick={this.clicked.bind(self, index)}
              >
                <a href="#" className={data.icon}>
                  {data.name}
                </a>
              </li>
            );
          })}
        </ul>
      </div>
    );
  }

Maintenant, l'attribut className utilise le modèle des littéraux pour concaténer plusieurs classes avec des espaces. En interpolant les variables activeClass et data.class, vous pouvez appliquer conditionnellement les classes souhaitées.

Cette approche vous permet d'ajouter et de supprimer dynamiquement des classes en fonction de l'état ou des accessoires du composant, offrant ainsi une plus grande flexibilité et un plus grand contrôle sur votre ReactJS. composants.

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!