Wende bedingte Stile in React an

1. Bedingte Stile in React
2. Wende bedingte Klassen in React an

React ist ein beliebtes Front-End-Framework, da es Ihnen die Freiheit gibt, eine schöne, reaktionsschnelle Benutzeroberfläche zu erstellen. Styling ist einer der wichtigsten Aspekte dieses Prozesses.

In diesem Artikel möchten wir mehrere Möglichkeiten zeigen, bedingte Stile in React anzuwenden.

Bedingte Stile in React

Die Bibliothek ermöglicht es Ihnen, Benutzereingaben als Werte zu speichern und abhängig von den allgemeinen Aktionen und Eingaben des Benutzers bedingte Stile anzuwenden.

Wenden Sie bedingte Inline-Stile in JSX an

Der erste und offensichtlichste Weg besteht darin, Inline-Stile zu definieren. Im Gegensatz zu HTML sind Inline-Stile in JSX gültiges JavaScript.

Aus diesem Grund steht es Ihnen frei, ternäre Operatoren zu verwenden, um eine Bedingung einzurichten, um den Wert eines bestimmten Stils zu bestimmen. Sie können beispielsweise Folgendes tun:

export default function App() {
  let danger = true;
  return (<div className = 'App'><h1 style = {
    {
      color: danger ? 'red' : 'green'
    }
  }>Some Text</h1>
    </div>);
}

Das bedeutet: Wenn der Wert der Variablen danger wahr ist, muss die CSS-Eigenschaft color den Wert red haben. Wenn nicht, dann ist es grün.

Sie können Stilobjekte sowohl außerhalb als auch innerhalb von JSX definieren. Sie müssen doppelte geschweifte Klammern verwenden, wenn Sie Stile direkt beim Aufrufen der Komponente anwenden.

Sie benötigen das erste Paar geschweifter Klammern, um JSX mitzuteilen, dass der darin enthaltene Inhalt ein JavaScript-Ausdruck ist. Das zweite Paar benötigen Sie als öffnende und schließende Tags für ein Objekt in JavaScript.

So definieren Sie das style-Objekt ausserhalb von JSX und referenzieren es nur in JSX:

export default function App() {
  let danger = true;
  let inlineStyle = { color: danger ? "red" : "green" };
  return (
    <div className="App">
      <h1 style={inlineStyle}>Some Text</h1>
    </div>
  );
}

Dies ist für einige Leute ein besser lesbarer Ansatz zum Definieren von Inline-Stilen. Gehen Sie zu CodeSandbox, um die Live-Demo zu überprüfen.

Wende bedingte Klassen in React an

Einige Leute ziehen es vor, Klassen anstelle von Inline-Stilen anzuwenden. Das Prinzip ist das gleiche.

Wir verwenden ternäre Operatoren, um einen dynamischen Klassennamen zu generieren. Sie können sogar noch weiter gehen und drei Optionen angeben:

export default function App() {
  let danger = false
  let warning = true
  return (
    <div className="App">
      <h1 className={danger? 'dangerText': warning ? : 'warningText' : 'regularText'}>Some Text</h1>
    </div>
  );
}

In diesem Fall prüfen wir, ob die Variable danger wahr ist.

Wenn ja, wenden wir die Klasse dangerText an. Wenn nicht, prüfen wir erneut, ob die Variable Warnung wahr ist.

Wenn ja, wenden wir die Klasse warningText an. Falls nicht, verwenden wir regularText.

Beachten Sie, dass wir das Attribut className verwenden, um Klassen auf Elemente in JSX anzuwenden.

Das bedingte Anwenden von Klassen anstelle von Inline-Stilen gibt Ihnen mehr Freiheit, das Erscheinungsbild von Elementen mithilfe von CSS anzupassen.

Verwenden Sie Vorlagenliterale, um Klassen in React bedingt anzuwenden

Sie können auch Vorlagenliterale verwenden, um den Wert einer Variablen als Klassennamen zu übernehmen. Dann können Sie den Wert der Variablen dynamisch ändern.

Sie können auch statische und dynamische Klassennamen kombinieren. Schauen wir uns das Beispiel an:

export default function App() {
  let danger = false
  let warning = true
  return (
    <div className="App">
      <h1 classNamme={`large ${errorNotification}`}>Some Text</h1>
    </div>
  );
}

Wenn die Variable errorNotification den Wert warning enthält, dann hat das Attribut className zwei Werte, large und warning.

Verwenden Sie das classnames-Paket, um Klassen in React bedingt anzuwenden

Schließlich verwenden viele Leute ein externes Paket namens classnames, um Klassen in React dynamisch anzuwenden.

Die Funktion classnames() akzeptiert ein Objekt mit möglichen Klassennamen als Eigenschaften und Bedingungen, um sie als Werte anzuwenden. Lass uns einen Blick darauf werfen:

export default function App() {
  let danger = false
  let warning = true
  return (
    <div className="App">
      <h1 className={classNames({warningText: error})}>Some Text</h1>
    </div>
  );
}

Lesen Sie die offiziellen Dokumente, um mehr über die Funktionalität des Pakets zu erfahren.