Bedingtes Rendern ermöglicht das dynamische Anzeigen oder Ausblenden von Elementen basierend auf bestimmten Bedingungen 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 in React wird für die bedingte Darstellung 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, in dem Studierende benachrichtigt werden sollen, wenn sie eine Prüfung bestanden haben. Übersteigt die Punktzahl eines Studierenden 60 Punkte, 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.

Bedingte Darstellung mit dem Ternär-Operator

Syntax

Die bedingte Darstellung mit dem Ternär-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 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-Prop.

Vollständiger App-Code

Hinweis

Obwohl beide Techniken eine bedingte Darstellung ermöglichen, ist es wichtig, ihre Unterschiede zu verstehen. Der &&-Operator eignet sich, wenn ein Element nur dann gerendert werden soll, wenn eine bestimmte Bedingung erfüllt ist. Im Gegensatz dazu ist der ternäre Operator geeignet, wenn zwischen zwei unterschiedlichen Elementen basierend auf einer Bedingung gewählt werden muss.