Verwenden mehrerer Klassennamen in React

Bei der Entwicklung komplexer Anwendungen sind HTML-Elemente mit mehreren Klassen nicht ungewöhnlich. Wenn Sie mit HTML und CSS vertraut sind, kennen Sie wahrscheinlich die Syntax zum Festlegen mehrerer Klassen. In diesem Artikel sehen wir uns mehrere verschiedene Möglichkeiten an, dies in React zu tun.

Mehrere Klassennamen in React

Die meisten React-Entwickler verwenden JSX, eine spezielle Syntax zum Schreiben einfacher Komponentendefinitionen. Seine Syntax ist HTML sehr ähnlich, weshalb es von den meisten React-Entwicklern bevorzugt wird. Es gibt einige wesentliche Unterschiede, die die Einstellungsklassen betreffen.

In HTML sind Sie es wahrscheinlich gewohnt, Klassen mit dem Attribut class zu setzen. Da React-Komponenten als Instanz einer Klasse definiert werden können, ist Klasse ein reserviertes Wort. Daher müssen Entwickler stattdessen das Attribut className verwenden.

In JSX müssen die Attribute className gleich Zeichenketten gesetzt werden. Eine einfache Definition mit mehreren Klassen würde so aussehen:

<h1 className="classOne classTwo">Hi! Try edit me</h1>

Alternativ kann das Attribut className gleich einem JavaScript-Ausdruck gesetzt werden, der einen String zurückgibt. Um sicherzustellen, dass die Ausdrücke korrekt als JavaScript-Code interpretiert werden, müssen Sie sie in geschweifte Klammern setzen. Schauen wir uns ein Beispiel an:

const color = "white"
<h1 className={"classOne " + color }>Hi! Try edit me</h1>;

In diesem Beispiel fügen wir eine reguläre Zeichenkette und einen Zeichenkettenwert in einer Variablen hinzu. Sobald der Ausdruck ausgewertet ist, entspricht unser className-Attribut dem 'classOne white'-String.

Wir können den Ausdruck lesbarer machen, indem wir den Operator + durch eine Methode .concat() ersetzen, die zwei Strings zu einem kombiniert.

const color="white"    
h1 className={"classOne ".concat(color)}>Hi! Try edit me</h1>

React-Methode .join()

Diese Standard-JavaScript-Methode ist nützlich, um ein Array von String-Werten in mehrere className-Werte umzuwandeln. Da es sich um eine JavaScript-Methode handelt, müssen wir in JSX einen ganzen Ausdruck zwischen geschweiften Klammern platzieren.

Standardmäßig werden die kombinierten Stringwerte durch ein Komma getrennt. Um jedoch eine gültige Liste von className-Werten zu erstellen, müssen wir sie durch ein einzelnes Leerzeichen trennen. Glücklicherweise können wir das Trennzeichen angeben, indem wir eine einzelne LeerZeichenkette ' ' als Argument an die Methode übergeben. Hier ist ein Beispiel:

class App extends Component {
  render() {
    const arr = ["bold", "primary", "lead"]
    return (<div><p className={arr.join(" ")}>Hi! Try edit me</p></div>)
  }
}

In unserer Datei styles.css auf playcode haben wir die drei Klassen definiert:

.lead {
  font-size: 40px;
}
.bold {
  font-weight: bold;
}
.primary {
  color: white
}

Sobald der Code in den geschweiften Klammern ausgeführt wurde, können Sie sehen, dass alle drei Klassen angewendet werden.

Sie können auch im Quellcode nachsehen, ob die Klassen auf das Element <p> angewendet werden.

<div id="app">
    <div class="container black">
        <p class="bold primary lead">Hi! Try edit me</p>
    </div>
</div>

Benutzerdefinierte Funktion in React

In ES6 können wir die Array-Destrukturierungssyntax verwenden, um eine elegante benutzerdefinierte Funktion zu erstellen, die eine formatierte Zeichenkette zurückgibt, die wir als className-Wert verwenden können.

Schauen wir uns den Code an:

class App extends Component {
  render() {
    const classNameGenerator = (...classes)=>{
      return classes.join(" ")
    }
    return (<div className={classNameGenerator("container")}></div>)
  }
}

Diese Funktion behandelt ihre Argumente als Array-Elemente und verwendet dann die Methode .join(), um eine formatierte Liste von className-Werten zurückzugeben.

Wenn Sie die Funktion verwenden, können Sie so viele Zeichenkettenwerte übergeben, wie Sie möchten.

Bedingter className in React

Die bedingte Anwendung der className-Werte kann nützlich sein, um das Aussehen eines Elements basierend auf Benutzereingaben zu ändern. Wenn Ihre Anwendung beispielsweise dunkle und helle Themen hat, sollte auch der Hintergrund von hellen zu dunkleren Schattierungen wechseln. Hier ist ein Codebeispiel:

const lightBackground = !this.state.darkTheme ? "white" : "black"
<div className={classNameGenerator("container") + " " + lightBackground }></div>

Der Variable lightBackground wird basierend auf dem Zustandseigenschaftswert darkTheme einer der beiden Strings zugewiesen. Zusätzlich zum Aufruf der Funktion classNameGenerator("") verwenden wir auch den Operator +, um auch den bedingten Wert der Variablen einzuschließen.

Zur besseren Demonstration enthält unsere Playcode-Anwendung eine Schaltfläche zum Umschalten des booleschen Wertes der Eigenschaft darkTheme.