Bedingtes Rendern ermöglicht es uns, Elemente basierend auf bestimmten Bedingungen dynamisch anzuzeigen oder zu verbergen, wodurch die Flexibilität von React-Komponenten erhöht wird. Dieser Abschnitt wird zwei Standardtechniken des bedingten Renderns untersuchen: den && Operator und den ternären Operator.

Bedingtes Rendern mit dem && Operator

Syntax

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

Diese Technik wird häufig eingesetzt, wenn wir ein Element nur anzeigen möchten, wenn eine bestimmte Bedingung als wahr bewertet wird.

Beispiel

Nehmen wir ein Beispiel, bei dem wir Studenten benachrichtigen möchten, die eine Prüfung bestanden haben. Wenn die Punktzahl eines Studenten 60 Punkte überschreitet, zeigen wir eine Erfolgsmeldung mit ihrem Namen und ihrer Punktzahl an.

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

Vollständiger App-Code

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

Bedingtes Rendern mit dem Ternär-Operator

Syntax

Das bedingte Rendern mit dem ternären Operator (? ... : ...) ist eine weitere leistungsstarke Technik. Es bietet eine prägnante Möglichkeit, Elemente basierend auf Bedingungen zu rendern.

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

Beispiel

Betrachten Sie ein Szenario, in dem wir Benutzer unterschiedlich begrüßen möchten, basierend darauf, ob sie eingeloggt sind. Die Greeting-Komponente demonstriert das bedingte Rendern mit dem ternären Operator.

In diesem Beispiel begrüßt die Greeting-Komponente Benutzer unterschiedlich basierend auf dem Wert der loggedIn-Eigenschaft.

Vollständiger App-Code

Hinweis

Während beide Techniken bedingtes Rendern erreichen, ist es wichtig, ihre Unterschiede zu verstehen. Der &&-Operator ist ideal, wenn Sie ein Element nur dann rendern möchten, wenn eine bestimmte Bedingung erfüllt ist. Im Gegensatz dazu ist der ternäre Operator geeignet für Fälle, in denen Sie zwischen zwei unterschiedlichen Elementen basierend auf einer Bedingung wählen müssen.