Bedingte Darstellung ermöglicht es, Elemente dynamisch basierend auf bestimmten Bedingungen anzuzeigen oder auszublenden und erhöht so die Flexibilität von React-Komponenten. In diesem Abschnitt werden zwei gängige Techniken der bedingten Darstellung behandelt: der &&-Operator und der ternäre Operator.

Bedingte Darstellung mit dem &&-Operator

Syntax

Der &&-Operator in React wird für die bedingte Darstellung verwendet und funktioniert ähnlich wie eine if-Anweisung in JavaScript. Er ermöglicht es, Elemente basierend auf bestimmten Bedingungen darzustellen.

condition && (<p>element</p>)

Diese Technik wird häufig eingesetzt, wenn ein Element nur angezeigt werden soll, wenn eine bestimmte Bedingung erfüllt ist.

Beispiel

Betrachten wir ein Beispiel, bei dem wir Studierende benachrichtigen möchten, die eine Prüfung bestanden haben. Wenn die Punktzahl eines Studierenden mehr als 60 beträgt, wird eine Erfolgsmeldung mit Name und Punktzahl angezeigt.

const Notification = (props) =>
  props.mark > 60 && (
    <p>
      {props.name} has passed the test with {props.mark} points.
    </p>
  );

Die Komponente Notification rendert bedingt ein Absatz-Element <p> basierend auf dem Wert der Eigenschaft mark.

Emilys Punktzahl wird nicht angezeigt, da sie weniger als 60pts beträgt.

Bedingtes Rendern mit dem Ternär-Operator

Syntax

Bedingte Darstellung mit dem ternären Operator (? ... : ...) ist eine weitere leistungsstarke Technik. Sie bietet eine prägnante Möglichkeit, Elemente basierend auf Bedingungen darzustellen.

condition ? (true_element) : (false_element)

Dieser Ansatz eignet sich, wenn zwischen zwei unterschiedlichen Elementen basierend auf einer Bedingung gewählt werden soll.

Beispiel

Betrachten Sie ein Szenario, in dem Benutzer je nach Anmeldestatus unterschiedlich begrüßt werden sollen. Die Komponente Greeting demonstriert die bedingte Darstellung mit dem ternären Operator.

const Greeting = (props) =>
  props.loggedIn ? (
    <p>Welcome to the home page, {props.name}.</p>
  ) : (
    <p>Hello {props.name}, could you please log in.</p>
  );

In diesem Beispiel begrüßt die Komponente Greeting die Benutzer unterschiedlich, abhängig vom Wert der Eigenschaft loggedIn.