ClassName-Werte in React dynamisch anwenden

1. Legen Sie dynamische className-Werte in React fest
2. Verwenden Sie natives JavaScript, um dynamische className-Werte in React festzulegen
3. Verwenden Sie Zeichenfolgenliterale (ES6), um dynamische className-Werte in React festzulegen

Moderne Benutzer stellen hohe Erwartungen an das Kundenerlebnis. Sie wollen Funktionen wie den Dunkelmodus und intuitive Schnittstellen, die auf ihre Aktionen reagieren.

Webentwickler müssen einen Weg finden, Klassen und Stile abhängig von Benutzeraktionen dynamisch zu aktualisieren, um diese Features zu implementieren.

Das Attribut className enthält mehrere Werte für erweiterte Anwendungen und Container. Wenn Sie mehrere Werte auf einen className setzen möchten, aber nur einer der className-Werte dynamisch ist, können Sie dies auf verschiedene Arten tun.

Legen Sie dynamische className-Werte in React fest

In React verwenden wir das Attribut className, um Klassen zu unseren Elementen hinzuzufügen. Das Attribut className enthält beim Erstellen komplexer Webanwendungen mehrere Werte.

Beim Erstellen von React-Anwendungen verwenden wir die Templating-Sprache JSX, die JavaScript-Ausdrücke innerhalb der return-Anweisung zulässt. Sie müssen lediglich JavaScript-Ausdrücke mit geschweiften Klammern {} umschließen, und alles zwischen diesen Klammern wird ausgewertet.

Sie können dem Attribut className mehrere Werte zuweisen. Einige von ihnen werden konstant sein, während andere dynamisch angewendet werden.

Lassen Sie uns spezifische Möglichkeiten untersuchen, dies in React zu tun.

Verwenden Sie natives JavaScript, um dynamische className-Werte in React festzulegen

Der einfachste Weg, dynamische className-Werte hinzuzufügen, besteht darin, geschweifte Klammern zu kombinieren und die className-Attribute gleich den Zustandsvariablen zu setzen. Dies ist eine ziemlich einfache Funktion, die in allen Versionen von JavaScript verfügbar ist.

Beispiel:

export default function App() {
    const [border, setBorder] = useState("blackBorder");
    return (
        <div className={"App " + border}>
            <h1>Hello CodeSandbox</h1>
            <input type="text" onChange={(e) => setBorder(e.target.value)}></input>
        </div>
    );
}

In diesem Beispiel haben wir den Haken useState() verwendet, um den Standardwert der Statusvariablen border auf blackBorder zu setzen. In CSS haben wir die Klassenregeln blackBorder definiert, die einen 2-Pixel-schwarzen Rand auf jeden Container anwenden.

Innerhalb der return-Anweisung haben wir die {}-Syntax mit geschweiften Klammern verwendet, um die beiden className-Werte zu haben. Die Klasse App ist konstant, während der zweite Wert className vom Wert der Zustandsvariablen border abhängt.

Wir können eine Texteingabe implementieren, damit Benutzer einen beliebigen className eingeben können, und der Wert des Werts border wird aktualisiert. Probieren Sie die Demo selbst aus und geben Sie einen der folgenden Werte ein: greenBorder, blackBorder, redBorder und sehen Sie, was passiert.

Verwenden Sie Zeichenfolgenliterale (ES6), um dynamische className-Werte in React festzulegen

Alternativ können Sie Backticks, auch String-Literale genannt, verwenden, um dynamische Werte für das Attribut className zu definieren.

Beispiel:

export default function App() {
    const [border, setBorder] = useState("blackBorder");
    return (
        <div className={`App ${border}`}>
            <h1>Hello CodeSandbox</h1>
            <input type="text" onChange={(e) => setBorder(e.target.value)}></input>
        </div>
    );
}

Diese Syntax ist viel besser lesbar. Achten Sie auf die doppelte Verwendung von geschweiften Klammern.

Das äußere Paar ist notwendig, damit JSX versteht, dass zwischen geschweiften Klammern ein JavaScript-Ausdruck steht.

Bei der Verwendung von Backticks bezeichnet das Dollarzeichen einen Verweis auf eine Variable. Wenn Sie beispielsweise ${someVariable} schreiben, würde JavaScript wissen, dass es den aktuellen Wert der Variablen nachschlagen muss.

Ansonsten ist alles wie vorher.