Wie kann ich einer ReactJS-Komponente dynamisch mehrere Klassen hinzufügen?

Dynamisches Hinzufügen mehrerer Klassen zu einer ReactJS-Komponente

Bei der Arbeit mit ReactJS müssen Sie möglicherweise mehrere Klassen zum Klassennamen eines Elements hinzufügen Attribut. Um potenzielle Fehler oder Verwirrung zu vermeiden, bieten ES6-Vorlagenliterale eine elegante Lösung.

Um dies zu erreichen, verwenden Sie Vorlagenliterale, um die Klassennamen in Backticks (`) einzuschließen und sie mit dem Operator „ “ zu verketten. Beispiel:

const className = `class1 class2 class3`;

In Ihrem Fall können Sie die Rendermethode Ihrer AccountMainMenu-Komponente ändern, um Vorlagenliterale zu verwenden:

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

Dieser Ansatz stellt sicher, dass mehrere Klassen korrekt hinzugefügt werden das className-Attribut, ohne dass eine komplexe Zeichenfolgenmanipulation oder potenzielle Fehler erforderlich sind.

Das obige ist der detaillierte Inhalt vonWie kann ich einer ReactJS-Komponente dynamisch mehrere Klassen hinzufügen?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!