Wie füge ich einer ReactJS-Komponente mehrere Klassen mit Vorlagenliteralen hinzu?

Hinzufügen mehrerer Klassen zu ReactJS-Komponenten mithilfe von Vorlagenliteralen

Um mehrere Klassen zu einer Komponente in ReactJS hinzuzufügen, können Sie ES6-Vorlagenliterale verwenden. Diese Methode bietet eine präzise und effiziente Möglichkeit, Zeichenfolgen und Variablen in einem einzigen Ausdruck zu kombinieren.

Schritt 1: Klassenvariablen definieren

Definieren Sie in der Rendermethode Ihrer Komponente eine Variable zum Speichern der Klassen, die Sie hinzufügen möchten. Zum Beispiel:

const activeClass = this.state.focused === index ? 'active' : '';

Diese Variable legt bedingt die „aktive“ Klasse basierend auf dem Status der Komponente fest.

Schritt 2: Verwenden Sie Vorlagenliterale, um Klassen zu kombinieren

Vorlagenliterale ermöglichen die Verwendung von Backticks (`), um mehrzeilige Zeichenfolgen zu erstellen. Betten Sie Klassenvariablen mithilfe der ${}-Syntax in die Zeichenfolge ein.

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

Diese Zeile verkettet die Variablen „activeClass“, „data.class“ und „main-class“ in einer einzigen Zeichenfolge.

Schritt 3: Dem Attribut „className“ zuweisen

Im JSX-Element die „Klassen“ zuweisen Variable zum Attribut „className“ hinzufügen. Dadurch werden alle Klassen auf das Element angewendet.

<li key={index} className={classes}>...</li>

Einzeilige Lösung

Mit der einzeiligen Version können Sie diese Schritte in einer einzigen Zeile kombinieren :

const classes = `form-control round-lg ${this.state.valid ? '' : 'error'}`;

wobei „this.state.valid“ eine Zustandsvariable ist, die die Klasse „error“ bedingt hinzufügt.

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