Bedingtes Rendern 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 des bedingten Renderns behandelt: der &&-Operator und der ternäre Operator.

Bedingtes Rendern mit dem &&-Operator

Syntax

Der &&-Operator wird in React für das bedingte Rendern verwendet und funktioniert ähnlich wie eine if-Anweisung in JavaScript. Er ermöglicht das Rendern von Elementen basierend auf bestimmten Bedingungen.

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.

Vollständiger App-Code

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

Bedingtes Rendern mit dem Ternär-Operator

Syntax

Die bedingte Darstellung mit dem Ternär-Operator (? ... : ...) ist eine weitere leistungsfähige 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 Greeting-Komponente demonstriert die bedingte Darstellung mit dem Ternär-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 Greeting-Komponente Benutzer unterschiedlich, abhängig vom Wert der loggedIn-Eigenschaft.

Vollständiger App-Code