Bedingtes Rendern bezieht sich auf das Ändern des Verhaltens einer App in Abhängigkeit von ihrem Zustand. Beispielsweise kannst du die Begrüßungsnachricht deiner React-App nachts auf dunkel stellen. So haben Sie je nach Tageszeit eine andere Displaymeldung.

Bedingtes Rendern ermöglicht es Ihnen, verschiedene React-Komponenten oder -Elemente zu rendern, wenn eine Bedingung erfüllt ist. In diesem Tutorial lernen Sie die verschiedenen Möglichkeiten kennen, wie Sie bedingtes Rendering in React.js-Anwendungen verwenden können.

Möglichkeiten zur Implementierung von bedingtem Rendering

Um diesen Beispielen folgen zu können, müssen Sie ein grundlegendes Verständnis dafür haben, wie React funktioniert. Wenn Sie in diesem Fall Probleme haben, machen Sie sich keine Sorgen - wir haben eine nützliche Lösung Anfängerleitfaden zu React.js.

Bedingte Anweisungen verwenden

Wie in JavaScript können Sie bedingte Anweisungen wie if…else verwenden, um Elemente zu erstellen, wenn bestimmte Bedingungen erfüllt sind.

Beispielsweise können Sie ein bestimmtes Element in der anzeigen wenn blockieren, wenn eine Bedingung erfüllt ist, und eine andere im anzeigen anders sperren, wenn die Bedingung nicht erfüllt ist.

Betrachten Sie das folgende Beispiel, das je nach Anmeldestatus des Benutzers entweder eine Anmelde- oder eine Abmeldeschaltfläche anzeigt.

Funktions-Dashboard (Requisiten) {
 const { isLoggedIn } = Requisiten
 if (isLoggedIn){
 Rückkehr Ausloggen
 } anders{
 Rückkehr Anmeldung
 }
}

Diese Funktion rendert je nach dem eine andere Schaltfläche ist eingeloggt Wert als Prop übergeben.

Verwandt: So verwenden Sie Requisiten in ReactJS

Alternativ können Sie den ternären Operator verwenden. Der ternäre Operator nimmt eine Bedingung auf, gefolgt von dem auszuführenden Code, wenn die Bedingung erfüllt ist Wahrheit gefolgt von dem Code, der ausgeführt werden soll, wenn die Bedingung ist falsch.

Schreiben Sie die obige Funktion um als:

Funktions-Dashboard (Requisiten) {
 const { isLoggedIn } = Requisiten
 Rückkehr (
 <>
 {isLogged?Ausloggen:Anmeldung)
 )
}

Der ternäre Operator macht die Funktion sauberer und leichter lesbar im Vergleich zu ansonsten Aussage.

Deklarieren von Elementvariablen

Elementvariablen sind Variablen, die JSX-Elemente enthalten und bei Bedarf in einer React-App gerendert werden können.

Sie können Elementvariablen verwenden, um nur einen bestimmten Teil der Komponente zu rendern, wenn Ihre Anwendung die angegebene Bedingung erfüllt.

Wenn Sie beispielsweise nur eine Anmeldeschaltfläche rendern möchten, wenn der Benutzer nicht angemeldet ist, und eine Abmeldeschaltfläche nur, wenn er angemeldet ist, können Sie Elementvariablen verwenden.

Funktion LoginBtn (Requisiten) {
 Rückkehr (

 Anmeldung

 );
}
Funktion LogoutBtn (Requisiten) {
 Rückkehr (

 Ausloggen

 );
}
Funktion Dashboard() {
 const [loggedIn, setLoggedIn] = useState (true)
 const handleLogin = () => {
 setLoggedIn (wahr)
 }
 const handleLogout = () => {
 setLoggedIn (false)
 }
 lass-Taste;
 if (eingeloggt) {
 Knopf = 
 } anders {
 Knopf = 
 }
 Rückkehr (
 <>
 {eingeloggt}
 )
}

Erstellen Sie im obigen Code zuerst die Schaltflächenkomponenten Login und Logout und definieren Sie dann die Komponente, um jede von ihnen unter verschiedenen Bedingungen zu rendern.

Verwenden Sie in dieser Komponente den Status-Hook React, um zu verfolgen, wann der Benutzer angemeldet ist.

Verwandt: Meistern Sie Ihre Reaktionsfähigkeiten, indem Sie diese zusätzlichen Haken lernen

Jetzt je nach Zustand entweder das Rendern oder Komponente.

Wenn der Benutzer nicht angemeldet ist, rendern Sie die Komponente andernfalls rendern the Komponente. Die beiden Handle-Funktionen ändern den Login-Zustand, wenn auf die jeweilige Schaltfläche geklickt wird.

Logische Operatoren verwenden

Sie können logisch verwenden && -Operator zum bedingten Rendern eines Elements. Hier wird ein Element nur gerendert, wenn die Bedingung wahr ist, andernfalls wird es ignoriert.

Wenn Sie einen Benutzer nur dann über die Anzahl der Benachrichtigungen benachrichtigen möchten, wenn er eine oder mehrere Benachrichtigungen hat, können Sie Folgendes verwenden.

Funktion ShowNotifications (Requisiten) {
 const {Benachrichtigungen} = Requisiten
 Rückkehr (
 <>
 {Benachrichtigungen.Länge > 0 &&

 Sie haben {notifications.length} Benachrichtigungen.


 }
 )
}

Um als Nächstes ein Element zu rendern, wenn der logische &&-Ausdruck einen falschen Wert ergibt, verketten Sie das logische || Operator.

Die folgende Funktion zeigt die Meldung „Sie haben keine Benachrichtigungen“ an, wenn keine Benachrichtigungen als Requisiten übergeben werden.

Funktion ShowNotifications (Requisiten) {
 const {Benachrichtigungen} = Requisiten
 Rückkehr (
 <>
 {Benachrichtigungen.Länge > 0 &&

 Sie haben {notifications.length} Benachrichtigungen.
 || 
Sie haben keine Benachrichtigungen

 }
 )
}

Rendern einer Komponente verhindern

Um eine Komponente auszublenden, obwohl sie von einer anderen Komponente gerendert wurde, geben Sie null anstelle ihrer Ausgabe zurück.

Betrachten Sie die folgende Komponente, die nur dann eine Warnschaltfläche rendert, wenn eine Warnmeldung als Requisiten übergeben wird.

Funktion Warnung (Requisiten) {
 const {warningMessage} = Requisiten
 if (!warnmeldung) {
 Null zurückgeben
 }
 Rückkehr (
 <>
Warnung
 )
}

Wenn Sie nun „warningMessage“ an die Komponente, wird eine Warnschaltfläche gerendert. Wenn Sie dies jedoch nicht tun, gibt null zurück und die Schaltfläche wird nicht angezeigt.

 // Die Warnschaltfläche wird gerendert
 // Die Warnschaltfläche wird nicht gerendert

Beispiele für bedingtes Rendering in realen React-Anwendungen

Verwenden Sie bedingtes Rendering, um verschiedene Aufgaben in Ihrer Anwendung auszuführen. Einige davon umfassen das Rendern von API-Daten nur dann, wenn sie verfügbar sind, und das Anzeigen einer Fehlermeldung nur dann, wenn ein Fehler vorliegt.

Rendern von Daten, die von einer API in React abgerufen wurden

Das Abrufen von Daten von einer API kann eine Weile dauern. Überprüfen Sie daher zuerst, ob es verfügbar ist, bevor Sie es in Ihrer Anwendung verwenden. Andernfalls gibt React einen Fehler aus, wenn es nicht verfügbar ist.

Die folgende Funktion zeigt, wie Sie von einer API zurückgegebene Daten bedingt rendern können.

Funktion FetchData() {
 const [data, setData] = useState (null);
 const apiURL = " https://api.nasa.gov/planetary/apod? api_key=DEMO_KEY";
 // Daten von der API mit Axios abrufen
 const fetchData = async () => {
 konstante Antwort = warte auf axios.get (apiURL)
 // Status mit den Daten aktualisieren
 setData (Antwort.Daten) 
 }
 Rückkehr (
 <>
Astronomiebild des Tages

 {
 Daten && 
{data.title}

{Daten.Erklärung}

 }
 )
}

Rufen Sie in der obigen Funktion die Daten aus der ab NASA-Apod-API mit Axios. Wenn die API eine Antwort zurückgibt, aktualisieren Sie den Status und verwenden Sie den logischen &&-Operator, um die Daten nur dann wiederzugeben, wenn sie verfügbar sind.

Verwandt: So verwenden Sie APIs in React mit Fetch und Axios

Fehlermeldungen anzeigen

In Fällen, in denen Sie einen Fehler nur dann anzeigen möchten, wenn er vorhanden ist, verwenden Sie bedingtes Rendern.

Wenn Sie beispielsweise ein Formular erstellen und eine Fehlermeldung anzeigen möchten, wenn ein Benutzer das falsche E-Mail-Format eingegeben hat, aktualisieren Sie den Status mit der Fehlermeldung und verwenden Sie eine if-Anweisung, um sie wiederzugeben.

Funktion showError() {
 const [error, setError] = useState (null)
 Rückkehr (
 <>
 {
 wenn (Fehler) {
Ein Fehler ist aufgetreten: {Fehler}

 }
 }
 )
}

Auswählen, was in Ihrer React-App verwendet werden soll

In diesem Lernprogramm haben Sie die verschiedenen Möglichkeiten kennengelernt, die JSX-Elemente bedingt rendern können.

Alle besprochenen Methoden liefern die gleichen Ergebnisse. Treffen Sie je nach Anwendungsfall und gewünschter Lesbarkeit eine Auswahl, was verwendet werden soll.

Die 7 besten kostenlosen Tutorials zum Erlernen von React und zum Erstellen von Web-Apps

Kostenlose Kurse sind selten so umfassend und hilfreich – aber wir haben mehrere React-Kurse gefunden, die ausgezeichnet sind und Ihnen den richtigen Einstieg ermöglichen.

Lesen Sie weiter

Über den Autor