Betinget gengivelse refererer til at ændre adfærden af ​​en app afhængigt af dens tilstand. For eksempel kan du ændre hilsenen i din React-app til mørk om natten. På denne måde har du en anderledes displaymeddelelse afhængigt af tidspunktet på dagen.

Betinget gengivelse giver dig mulighed for at gengive forskellige React-komponenter eller -elementer, hvis en betingelse er opfyldt. I denne tutorial skal du lære om de forskellige måder, du kan bruge betinget gengivelse i React.js-applikationer.

Måder du kan implementere betinget gengivelse

For at følge med i disse eksempler skal du have en grundlæggende forståelse af, hvordan React fungerer. Hvis du kæmper i det tilfælde, så fortvivl ikke - vi har en nyttig begynderguide til React.js.

Brug af betingede erklæringer

Ligesom i JavaScript kan du bruge betingede sætninger som if…else til at oprette elementer, når visse betingelser er opfyldt.

For eksempel kan du vise et specificeret element i hvis blokere, når en betingelse er opfyldt, og vis en anden i andet blokere, hvis betingelsen ikke er opfyldt.

Overvej følgende eksempel, der enten viser en login- eller logout-knap afhængigt af brugerens login-status.

funktion Dashboard (rekvisitter) {
 const { isLoggedIn } = rekvisitter
 if (er logget på){
 Vend tilbage Log ud
 } andet{
 Vend tilbage Log på
 }
}

Denne funktion gengiver en anden knap afhængigt af er logget på værdi bestået som en rekvisit.

Relaterede: Sådan bruges rekvisitter i ReactJS

Alternativt kan du bruge den ternære operator. Den ternære operator indtager en tilstand efterfulgt af koden for at udføre, hvis betingelsen er sandfærdig efterfulgt af koden, der skal udføres, hvis betingelsen er falsk.

Omskriv ovenstående funktion som:

funktion Dashboard (rekvisitter) {
 const { isLoggedIn } = rekvisitter
 Vend tilbage (
 <>
 {er logget?Log ud:Log på)
 )
}

Den ternære operatør gør funktionen renere og lettere at læse i forhold til hvis ellers udmelding.

Erklæring af elementvariabler

Elementvariabler er variabler, der kan indeholde JSX-elementer og gengives efter behov i en React-app.

Du kan bruge elementvariabler til kun at gengive en bestemt del af komponenten, når din applikation opfylder den angivne betingelse.

Hvis du f.eks. kun vil gengive en login-knap, når brugeren ikke er logget ind, og en logout-knap kun, når de er logget ind, kan du bruge elementvariabler.

funktion LoginBtn (rekvisitter) {
 Vend tilbage (

 Log på

 );
}
funktion LogoutBtn (rekvisitter) {
 Vend tilbage (

 Log ud

 );
}
function Dashboard() {
 const [loggedIn, setLoggedIn] = useState (sand)
 const handleLogin = () => {
 setLoggedIn (sand)
 }
 const handleLogout = () => {
 setLoggedIn (falsk)
 }
 lad knap;
 if (logget ind) {
 knap = 
 } andet {
 knap = 
 }
 Vend tilbage (
 <>
 {logget ind}
 )
}

I ovenstående kode oprettede du først login- og logout-knapkomponenterne og definerer derefter komponent for at gengive hver af dem på forskellige betingelser.

I denne komponent skal du bruge React state hook til at holde styr på, hvornår brugeren er logget ind.

Relaterede: Mestre dine reaktionsevner ved at lære disse ekstra kroge

Nu, afhængigt af staten enten gøre eller komponent.

Hvis brugeren ikke er logget ind, skal du gengive komponent ellers gøre the komponent. De to håndtagsfunktioner ændrer login-tilstanden, når der klikkes på den respektive knap.

Brug af logiske operatører

Du kan bruge logisk && operatør til betinget gengivelse af et element. Her gengives et element kun, hvis betingelsen evalueres til sand, ellers ignoreres den.

Hvis du kun vil give en bruger besked om antallet af notifikationer, de har, når de har en eller flere notifikationer, kan du bruge følgende.

function ShowNotifications (rekvisitter) {
 const { notifikationer } = rekvisitter
 Vend tilbage (
 <>
 {notifications.length > 0 &&

 Du har {notifications.length} underretninger.


 }
 )
}

For at gengive et element, hvis det logiske &&-udtryk evalueres til en falsk værdi, kæde den logiske || operatør.

Følgende funktion viser meddelelsen "Du har ingen meddelelser", hvis ingen meddelelser sendes som rekvisitter.

function ShowNotifications (rekvisitter) {
 const { notifikationer } = rekvisitter
 Vend tilbage (
 <>
 {notifications.length > 0 &&

 Du har {notifications.length} underretninger.
 || 
Du har ingen notifikationer

 }
 )
}

Forhindre en komponent i at blive gengivet

For at skjule en komponent, selvom den blev gengivet af en anden komponent, skal du returnere null i stedet for dens output.

Overvej følgende komponent, der kun gengiver en advarselsknap, hvis en advarselsmeddelelse sendes som rekvisitter.

funktion Advarsel (rekvisitter) {
 const {warningMessage} = rekvisitter
 if (!advarselsmeddelelse) {
 returner null
 }
 Vend tilbage (
 <>
Advarsel
 )
}

Nu, hvis du sender 'advarselsmeddelelse' til komponent, vil en advarselsknap blive gengivet. Men hvis du ikke gør det, vil returnere null, og knappen vises ikke.

 // advarselsknappen gengives
 // advarselsknappen gengives ikke

Eksempler på betinget gengivelse i Real-Life React-applikationer

Brug betinget gengivelse til at udføre forskellige opgaver i din applikation. Nogle af dem omfatter kun gengivelse af API-data, når de er tilgængelige, og kun at vise en fejlmeddelelse, når der er en fejl.

Gengivelse af data hentet fra en API i React

Hentning af data fra en API kan tage et stykke tid. Tjek derfor først, om det er tilgængeligt, før du bruger det i din applikation, ellers vil React give en fejl, hvis det ikke er tilgængeligt.

Den følgende funktion viser, hvordan du betinget kan gengive data returneret af en API.

funktion FetchData() {
 const [data, setData] = useState (nul);
 const apiURL = " https://api.nasa.gov/planetary/apod? api_key=DEMO_KEY";
 // Hent data fra API ved hjælp af Axios
 const fetchData = async () => {
 const response = afvent axios.get (apiURL)
 // Opdater tilstand med dataene
 setData (respons.data) 
 }
 Vend tilbage (
 <>
Dagens astronomibillede

 {
 data && 
{data.title}

{data.explanation}

 }
 )
}

I ovenstående funktion skal du hente dataene fra NASA Apod API ved hjælp af Axios. Når API'en returnerer et svar, skal du opdatere tilstanden og bruge logisk &&-operator til kun at gengive dataene, når de er tilgængelige.

Relaterede: Sådan bruger du API'er i React ved hjælp af Fetch og Axios

Viser fejlmeddelelser

I tilfælde, hvor du kun vil vise en fejl, når den eksisterer, skal du bruge betinget gengivelse.

For eksempel, hvis du opretter en formular og ønsker at vise en fejlmeddelelse, hvis en bruger har indtastet i det forkerte e-mail-format, skal du opdatere tilstanden med fejlmeddelelsen og bruge en if-sætning til at gengive den.

function showError() {
 const [error, setError] = useState (null)
 Vend tilbage (
 <>
 {
 if (fejl) {
Der opstod en fejl: {error}

 }
 }
 )
}

Vælg, hvad der skal bruges i din React-app

I denne tutorial lærte du om de flere måder, som kan betinget gengive JSX-elementer.

Alle de diskuterede metoder giver de samme resultater. Træf et valg om, hvad du vil bruge, afhængigt af brugssituationen og niveauet af læsbarhed, du ønsker at opnå.

7 bedste gratis selvstudier til at lære at reagere og lave webapps

Gratis kurser er sjældent så omfattende og nyttige - men vi har fundet adskillige React-kurser, der er fremragende og vil få dig i gang på det rigtige fod.

Læs Næste

Om forfatteren