Voorwaardelijke weergave verwijst naar het veranderen van het gedrag van een app afhankelijk van de status. Je kunt bijvoorbeeld de begroeting van je React-app 's nachts donker maken. Zo heb je afhankelijk van het tijdstip van de dag een ander displaybericht.

Met voorwaardelijke weergave kunt u verschillende React-componenten of -elementen renderen als aan een voorwaarde wordt voldaan. In deze zelfstudie leer je over de verschillende manieren waarop je voorwaardelijke weergave kunt gebruiken in React.js-toepassingen.

Manieren waarop u voorwaardelijke weergave kunt implementeren

Om deze voorbeelden te volgen, moet u een basiskennis hebben van hoe React werkt. Als je in dat geval worstelt, maak je geen zorgen - we hebben een nuttige beginnershandleiding voor React.js.

Voorwaardelijke verklaringen gebruiken

Net als in JavaScript, kunt u voorwaardelijke instructies zoals if...else gebruiken om elementen te maken wanneer aan bepaalde voorwaarden wordt voldaan.

U kunt bijvoorbeeld een bepaald element weergeven in de

als blokkeren wanneer aan een voorwaarde is voldaan en een andere weergeven in de anders blokkeren als niet aan de voorwaarde wordt voldaan.

Beschouw het volgende voorbeeld dat een login- of logout-knop weergeeft, afhankelijk van de inlogstatus van de gebruiker.

functie Dashboard (rekwisieten) {
 const { isLoggedIn } = rekwisieten
 als (is ingelogd){
 opbrengst Uitloggen
 } anders{
 opbrengst Log in
 }
}

Deze functie geeft een andere knop weer, afhankelijk van de is ingelogd waarde doorgegeven als een prop.

Verwant: Hoe rekwisieten te gebruiken in ReactJS

Als alternatief kunt u de ternaire operator gebruiken. De ternaire operator neemt een voorwaarde in gevolgd door de code die moet worden uitgevoerd als de voorwaarde is waarheidsgetrouw gevolgd door de code die moet worden uitgevoerd als de voorwaarde is vals.

Herschrijf de bovenstaande functie als:

functie Dashboard (rekwisieten) {
 const { isLoggedIn } = rekwisieten
 opbrengst (
 <>
 {isGelogd?Uitloggen:Log in)
 )
}

De ternaire operator maakt de functie schoner en gemakkelijker te lezen in vergelijking met de als...anders uitspraak.

Elementvariabelen declareren

Elementvariabelen zijn variabelen die JSX-elementen kunnen bevatten en die indien nodig in een React-app kunnen worden weergegeven.

U kunt elementvariabelen gebruiken om slechts een bepaald deel van de component weer te geven wanneer uw toepassing aan de opgegeven voorwaarde voldoet.

Als u bijvoorbeeld alleen een inlogknop wilt weergeven wanneer de gebruiker niet is aangemeld en een uitlogknop alleen wanneer deze is aangemeld, kunt u elementvariabelen gebruiken.

functie LoginBtn (rekwisieten) {
 opbrengst (

 Log in

 );
}
functie LogoutBtn (rekwisieten) {
 opbrengst (

 Uitloggen

 );
}
functie Dashboard() {
 const [loggedIn, setLoggedIn] = useState (true)
 const handleLogin = () => {
 setLoggedIn (waar)
 }
 const handleUitloggen = () => {
 setLoggedIn (false)
 }
 laat knop;
 if (ingelogd) {
 knop = 
 } anders {
 knop = 
 }
 opbrengst (
 <>
 {ingelogd}
 )
}

In de bovenstaande code hebt u eerst de componenten van de knop Aanmelden en Afmelden gemaakt en vervolgens de component om elk van hen op verschillende voorwaarden weer te geven.

Gebruik in deze component React state hook om bij te houden wanneer de gebruiker is ingelogd.

Verwant: Beheers uw reactievaardigheden door deze extra haken te leren

Nu, afhankelijk van de staat, ofwel renderen de of onderdeel.

Als de gebruiker niet is ingelogd, render dan de component render anders the onderdeel. De twee hendelfuncties veranderen de aanmeldingsstatus wanneer op de betreffende knop wordt geklikt.

Logische operators gebruiken

U kunt gebruik maken van logische && operator om een ​​element voorwaardelijk weer te geven. Hier wordt een element alleen weergegeven als de voorwaarde waar is, anders wordt het genegeerd.

Als u een gebruiker alleen op de hoogte wilt stellen van het aantal meldingen dat ze hebben als ze een of meer meldingen hebben, kunt u het volgende gebruiken.

functie ShowNotifications (rekwisieten) {
 const { notificaties } = rekwisieten
 opbrengst (
 <>
 {meldingen.lengte > 0 &&

 Je hebt {notifications.length} meldingen.


 }
 )
}

Om vervolgens een element weer te geven als de logische &&-expressie een onwaar waarde oplevert, moet u de logische ||. aaneenketenen exploitant.

De volgende functie geeft het bericht "Je hebt geen meldingen" weer als er geen meldingen als rekwisieten worden doorgegeven.

functie ShowNotifications (rekwisieten) {
 const { notificaties } = rekwisieten
 opbrengst (
 <>
 {meldingen.lengte > 0 &&

 Je hebt {notifications.length} meldingen.
 || 
Je hebt geen meldingen

 }
 )
}

Voorkomen dat een component wordt weergegeven

Als u een component wilt verbergen, ook al is deze door een andere component weergegeven, retourneert u null in plaats van de uitvoer.

Overweeg het volgende onderdeel dat alleen een waarschuwingsknop weergeeft als een waarschuwingsbericht als rekwisieten wordt doorgegeven.

functie Waarschuwing (rekwisieten) {
 const {warningMessage} = rekwisieten
 if (!warningMessage) {
 retourneer null
 }
 opbrengst (
 <>
Waarschuwing
 )
}

Als u nu 'warningMessage' doorgeeft aan de component, wordt een waarschuwingsknop weergegeven. Als u dat echter niet doet, retourneert null en de knop wordt niet weergegeven.

 // de waarschuwingsknop wordt weergegeven
 // de waarschuwingsknop wordt niet weergegeven

Voorbeelden van voorwaardelijke weergave in real-life React-toepassingen

Gebruik voorwaardelijke weergave om verschillende taken in uw toepassing uit te voeren. Sommige daarvan omvatten het alleen weergeven van API-gegevens wanneer deze beschikbaar zijn en het weergeven van een foutmelding alleen als er een fout bestaat.

Gegevens weergeven die zijn opgehaald van een API in React

Het ophalen van gegevens uit een API kan even duren. Controleer daarom eerst of het beschikbaar is voordat u het in uw toepassing gebruikt, anders zal React een foutmelding geven als het niet beschikbaar is.

De volgende functie laat zien hoe u gegevens die door een API worden geretourneerd voorwaardelijk kunt weergeven.

functie FetchData() {
 const [data, setData] = useState (null);
 const apiURL = " https://api.nasa.gov/planetary/apod? api_key=DEMO_KEY";
 // Gegevens ophalen van API met Axios
 const fetchData = async () => {
 const response = wacht axios.get (apiURL)
 // Update de status met de gegevens
 setData (respons.data) 
 }
 opbrengst (
 <>
Astronomiefoto van de dag

 {
 gegevens && 
{data.title}

{gegevens.uitleg}

 }
 )
}

Haal in de bovenstaande functie de gegevens op uit de NASA Apod-API met behulp van Axis. Wanneer de API een antwoord retourneert, werkt u de status bij en gebruikt u de logische &&-operator om de gegevens alleen weer te geven als deze beschikbaar zijn.

Verwant: API's consumeren in React met Fetch en Axios

Foutmeldingen weergeven

In gevallen waarin u een fout alleen wilt weergeven als deze bestaat, gebruikt u voorwaardelijke weergave.

Als u bijvoorbeeld een formulier aan het maken bent en een foutbericht wilt weergeven als een gebruiker het verkeerde e-mailformaat heeft getypt, werkt u de status bij met het foutbericht en gebruikt u een if-statement om het weer te geven.

functie showError() {
 const [error, setError] = useState (null)
 opbrengst (
 <>
 {
 als (fout) {
Er is een fout opgetreden: {error}

 }
 }
 )
}

Kiezen wat u wilt gebruiken in uw React-app

In deze zelfstudie hebt u geleerd over de verschillende manieren waarop JSX-elementen voorwaardelijk kunnen worden weergegeven.

Alle besproken methoden geven dezelfde resultaten. Maak een keuze wat u wilt gebruiken, afhankelijk van de use case en het niveau van leesbaarheid dat u wilt bereiken.

7 Beste gratis tutorials om te leren reageren en webapps te maken

Gratis cursussen zijn zelden zo uitgebreid en nuttig -- maar we hebben verschillende React-cursussen gevonden die uitstekend zijn en waarmee u op de juiste manier aan de slag kunt.

Lees volgende

Over de auteur