Bedingte Darstellung in React
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 für bedingtes Rendern 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 als wahr ausgewertet wird.
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
Bedingtes Rendern 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 Greeting-Komponente demonstriert das bedingte Rendern 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 Greeting-Komponente Benutzer unterschiedlich, abhängig vom Wert der loggedIn-Prop.
Vollständiger App-Code
Obwohl beide Techniken bedingtes Rendern ermöglichen, ist es wichtig, ihre Unterschiede zu verstehen. Der &&-Operator eignet sich, wenn ein Element nur bei Erfüllung einer bestimmten Bedingung gerendert werden soll. Im Gegensatz dazu ist der ternäre Operator geeignet, wenn zwischen zwei unterschiedlichen Elementen basierend auf einer Bedingung gewählt werden muss.
1. Wie funktioniert der &&-Operator beim bedingten Rendern in React?
2. Welcher Operator wird für das bedingte Rendern mit einer if...else-ähnlichen Struktur in React verwendet?
Danke für Ihr Feedback!
Fragen Sie AI
Fragen Sie AI
Fragen Sie alles oder probieren Sie eine der vorgeschlagenen Fragen, um unser Gespräch zu beginnen
Großartig!
Completion Rate verbessert auf 4Bedingte Darstellung in React
Swipe um das Menü anzuzeigen
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 für bedingtes Rendern 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 als wahr ausgewertet wird.
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
Bedingtes Rendern 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 Greeting-Komponente demonstriert das bedingte Rendern 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 Greeting-Komponente Benutzer unterschiedlich, abhängig vom Wert der loggedIn-Prop.
Vollständiger App-Code
Obwohl beide Techniken bedingtes Rendern ermöglichen, ist es wichtig, ihre Unterschiede zu verstehen. Der &&-Operator eignet sich, wenn ein Element nur bei Erfüllung einer bestimmten Bedingung gerendert werden soll. Im Gegensatz dazu ist der ternäre Operator geeignet, wenn zwischen zwei unterschiedlichen Elementen basierend auf einer Bedingung gewählt werden muss.
1. Wie funktioniert der &&-Operator beim bedingten Rendern in React?
2. Welcher Operator wird für das bedingte Rendern mit einer if...else-ähnlichen Struktur in React verwendet?
Danke für Ihr Feedback!
