ClassName-Werte in React bedingt setzen

1. Setzen Sie den className bedingt in React
2. Verwenden Sie den ternären Operator, um den className bedingt in React zu setzen
3. Verwenden Sie das classNames-Paket, um den className bedingt in React zu setzen
4. Verwenden Sie die Funktion clsx(), um den className bedingt in React zu setzen

Als Online-Kunden froh waren, nur einen einzigen Ort zum Online-Shopping zu haben, sind die Zeiten lange vorbei. Heutzutage haben Internetnutzer unzählige Möglichkeiten, Zeit online zu verbringen, und ihre Erwartungen an das Kundenerlebnis steigen.

Unternehmen stehen unter zunehmendem Druck, benutzerfreundliche Websites zu entwickeln, die zwar einfach aussehen, aber viel Arbeit in der Entwicklung und Pflege erfordern.

Setzen Sie den className bedingt in React

React ist ein beliebtes JavaScript-basiertes Framework für die Entwicklung von Website-Benutzeroberflächen. Es verwendet die Vorlagensprache JSX, wie HTML, verfügt jedoch über dynamische Funktionen.

Einer der größten Vorteile von JSX besteht darin, dass Sie Attribute bedingt anwenden können. Klassen werden mit dem Attribut className gesetzt (class ist ein reserviertes Wort in React).

Inline-Stile können mit dem Attribut styles gesetzt werden.

Das bedingte Setzen des Attributs className kann in vielerlei Hinsicht nützlich sein. Sie könnten beispielsweise ein Schalterelement implementieren, mit dem Benutzer zwischen dem dunklen und dem hellen Modus umschalten können.

Bedingungen, die den endgültigen Wert des Attributs className bestimmen, hängen von den Werten der Objekte state oder props ab. Der Zustand wird verwendet, um Variablen basierend auf Benutzereingaben zu pflegen und zu aktualisieren, wie z. B. ein Textfeld oder der Wert einer Checkbox-Schaltfläche.

Das Props-Objekt enthält Daten, die von einer übergeordneten an die untergeordnete Komponente weitergegeben werden. Das Ändern der Werte props und className löst ein erneutes Rendern der gesamten Komponente aus, führt den Vergleich aus und aktualisiert den Eigenschaftswert className.

Schauen wir uns ohne weitere Umschweife an, wie man Stile bedingt anwendet.

Verwenden Sie den ternären Operator, um den className bedingt in React zu setzen

Mit JSX können Sie Attribute auf gültige JavaScript-Ausdrücke setzen, die einen bestimmten Wert zurückgeben. Zum Beispiel würde className="dark" den className immer auf 'dark' setzen.

Stattdessen können Sie den Wert des Attributs className auf einen JavaScript-Ausdruck setzen, der bestimmte Variablen auswertet, um den Wert des Attributs className zu bestimmen. Schauen wir uns das Beispiel an.

export default function App() {
  const [dark, setDark] = useState(false);
  return (
    <div className={dark ? "dark" : ""}>
      <input type="checkbox" onChange={() => setDark(!dark)}></input>
      Switch to The Opposite
    </div>
  );
}

Sie können die Live-Demo selbst ausprobieren.

In diesem Fall verwenden wir doppelte geschweifte Klammern, um das Attribut className gleich einem ternären Operator zu setzen, der den endgültigen Wert className in Abhängigkeit vom Wert der Zustandsvariablen dark bestimmt. Wenn es wahr ist, wendet JavaScript den String 'dark' als Wert an; wenn nicht, wird es nichts anwenden.

Wir könnten es auch anweisen, einen beliebigen X-String anzuwenden, wenn die Zustandsvariable dark true ist, und einen beliebigen Y-String, wenn sie false ist.

Sie könnten auch eine Mischung aus className-Strings haben, die immer gelten sollten, und solchen, die bedingt angewendet werden sollten. Lass uns einen Blick darauf werfen.

export default function App() {
  const [dark, setDark] = useState(false);
  return (
    <div className={`large ${dark ? "dark" : ""}`}>
      <input type="checkbox" onChange={() => setDark(!dark)}></input>
      Switch to The Opposite
    </div>
  );
}

In diesem Fall hat das Attribut className in jedem Fall den Wert 'large', und es gilt auch className 'dark', wenn die Zustandsvariable true ist.

Vorlagenliterale (``) sind die neueste Funktion von JavaScript ES6. Da React auf JavaScript basiert, kannst du sie auch in React-Apps verwenden.

Verwenden Sie das classNames-Paket, um den className bedingt in React zu setzen

Die JavaScript-Community hat ein classNames-Paket entwickelt, um auf einfache Weise Bedingungen festzulegen, um Werte bedingt auf das Attribut className anzuwenden. Um es zu installieren, geben Sie den folgenden Befehl in Ihre CLI ein.

npm install classnames

Dann können Sie Folgendes tun.

export default function App() {
  const [dark, setDark] = useState(false);
  return (
    <div className={classNames({"large": true, "nightMode": dark})}>
      <input type="checkbox" onChange={() => setDark(!dark)}></input>
      Switch to The Opposite
    </div>
  );
}

Wir haben ein Objektargument für die Funktion classNames(), wobei die Schlüssel-Wert-Paare die className-Werte und die Bedingungen für ihre Anwendung darstellen.

Im obigen Beispiel wird immer der Wert 'large' verwendet, da sein Wert auf true gesetzt ist. Der 'nightMode' wird nur dann auf das Attribut className angewendet, wenn die Zustandsvariable dark den Wert true ergibt.

Verwenden Sie die Funktion clsx(), um den className bedingt in React zu setzen

Da JavaScript-Entwickler Klassen oft bedingt anwenden müssen, haben sie für dieses Problem auch die Funktion clsx() entwickelt.

Die Funktion clsx() kann vielseitig verwendet werden. Lassen Sie uns untersuchen, wie unsere Anwendung aussehen würde, wenn wir das Attribut className mit der Funktion clsx() setzen würden.

export default function App() {
  const [dark, setDark] = useState(false);
  return (
    <div className={clsx({"large": true, "nightMode": dark})}>
      <input type="checkbox" onChange={() => setDark(!dark)}></input>
      Switch to The Opposite
    </div>
  );
}

Um mehr über die Funktion zu erfahren, was sie zurückgibt und wie sie funktioniert, besuchen Sie die offizielle npm-Seite.