Wie füge ich ReactJS-Komponenten mehrere Klassen hinzu?

Hinzufügen mehrerer Klassen zu ReactJS-Komponenten

Bei der Arbeit mit ReactJS und JSX kann es vorkommen, dass Sie mehrere Klassen auf a anwenden müssen Einzelkomponente. Ein häufiges Szenario ist das bedingte Hinzufügen der aktiven Klasse, wenn ein Element fokussiert oder angeklickt wird.

In Ihrem Beispiel versuchen Sie, mehrere Klassen zum className-Attribut eines li-Elements wie folgt hinzuzufügen:

Dieser Ansatz verwendet jedoch den Kommaoperator ,, der die Zeichenfolgen nur verkettet, ohne Leerzeichen hinzuzufügen. Um mehrere Klassen korrekt hinzuzufügen, müssen Sie die ES6-Vorlagenliteralfunktion verwenden.

Ändern Sie in Ihrer AccountMainMenu-Komponente die Rendermethode wie folgt:

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}" main-class onclick="{this.clicked.bind(self," index>
                <a href="#" classname="{data.icon}">
                  {data.name}
                </a>
              </li>
            );
          })}
        </ul>
      </div>
    );
  }

Jetzt verwendet das Attribut „className“ eine Vorlage Literale, um mehrere Klassen mit Leerzeichen zu verketten. Durch Interpolation der Variablen „activeClass“ und „data.class“ können Sie die gewünschten Klassen bedingt anwenden.

Dieser Ansatz ermöglicht Ihnen das dynamische Hinzufügen und Entfernen von Klassen basierend auf dem Status oder den Requisiten der Komponente, was eine größere Flexibilität und Kontrolle über Ihr ReactJS bietet Komponenten.

Das obige ist der detaillierte Inhalt vonWie füge ich ReactJS-Komponenten mehrere Klassen hinzu?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!