Injizieren mehrerer Klassen in ReactJS-Komponenten
In ReactJS ermöglicht uns das className-Attribut, CSS-Klassen für Stilelemente zu definieren. Bei der Arbeit mit mehreren Klassen ist es wichtig zu verstehen, wie man diese effizient und dynamisch hinzufügt.
Problem:
Ein Anfänger stößt auf ein Problem, während er versucht, mehrere Klassen zuzuweisen ein className-Attribut innerhalb eines li-Elements:
<li key={index} className={activeClass, data.class, "main-class"}></li>Lösung:
Um dieses Problem zu lösen, nutzen wir ES6-Vorlagenliterale:
const classes = `active ${data.class} main-class`;Indem wir mehrere Klassen in Backticks einschließen und sie mit Leerzeichen verbinden, erstellen wir eine dynamische Zeichenfolge von Klassen, die dem className-Attribut zugewiesen werden kann:
<li key={index} className={classes} onClick={self.clicked.bind(self, index)}></li>Beispiel:
const errorMessage = this.state.error ? "error" : "";
const inputClasses = `form-control ${errorMessage}`;Dann rendern wir einfach die Eingabe:
<input className={inputClasses} />Diese Methode bietet einen unkomplizierten und vielseitigen Ansatz zum Einfügen mehrerer Klassen in ReactJS-Komponenten und verbessert so die Flexibilität und Lesbarkeit des Codes.
Das obige ist der detaillierte Inhalt vonWie füge ich mehrere CSS-Klassen in ReactJS-Komponenten ein?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!
