Betinget gjengivelse refererer til å endre oppførselen til en app avhengig av tilstanden. Du kan for eksempel endre velkomstmeldingen til React-appen til mørk om natten. På denne måten har du en annen displaymelding avhengig av tiden på dagen.

Betinget gjengivelse lar deg gjengi forskjellige React-komponenter eller -elementer hvis en betingelse er oppfylt. I denne opplæringen skal du lære om de forskjellige måtene du kan bruke betinget gjengivelse i React.js-applikasjoner.

Måter du kan implementere betinget gjengivelse

For å følge med på disse eksemplene, må du ha en grunnleggende forståelse av hvordan React fungerer. Hvis du sliter i det tilfellet, ikke bekymre deg - vi har en nyttig nybegynnerguide til React.js.

Bruke betingede erklæringer

Som i JavaScript kan du bruke betingede utsagn som if…else for å lage elementer når visse betingelser er oppfylt.

For eksempel kan du vise et spesifisert element i hvis blokkere når en betingelse er oppfylt og vise en annen i ellers blokkere dersom vilkåret ikke er oppfylt.

Tenk på følgende eksempel som enten viser en påloggings- eller utloggingsknapp avhengig av påloggingsstatusen til brukeren.

funksjon Dashboard (rekvisitter) {
 const { isLoggedIn } = rekvisitter
 if (er pålogget){
 komme tilbake Logg ut
 } annet{
 komme tilbake Logg Inn
 }
}

Denne funksjonen gjengir en annen knapp avhengig av er pålogget verdi vedtatt som en rekvisitt.

I slekt: Hvordan bruke rekvisitter i ReactJS

Alternativt kan du bruke den ternære operatoren. Den ternære operatøren tar inn en tilstand etterfulgt av koden for å utføre hvis betingelsen er det sanne etterfulgt av koden som skal utføres hvis betingelsen er falsk.

Omskriv funksjonen ovenfor som:

funksjon Dashboard (rekvisitter) {
 const { isLoggedIn } = rekvisitter
 komme tilbake (
 <>
 {er logget?Logg ut:Logg Inn)
 )
}

Den ternære operatøren gjør funksjonen renere og lettere å lese sammenlignet med hvis … annet uttalelse.

Erklære elementvariabler

Elementvariabler er variabler som kan inneholde JSX-elementer og gjengis når det kreves i en React-app.

Du kan bruke elementvariabler til å gjengi bare en viss del av komponenten når applikasjonen oppfyller den angitte betingelsen.

For eksempel, hvis du bare vil gjengi en påloggingsknapp når brukeren ikke er pålogget og en utloggingsknapp bare når de er pålogget, kan du bruke elementvariabler.

funksjon LoginBtn (rekvisitter) {
 komme tilbake (

 Logg Inn

 );
}
funksjon LogoutBtn (rekvisitter) {
 komme tilbake (

 Logg ut

 );
}
function Dashboard() {
 const [loggedIn, setLoggedIn] = useState (true)
 const handleLogin = () => {
 setLoggedIn (true)
 }
 const handleLogout = () => {
 setLoggedIn (false)
 }
 la knappen;
 if (logget på) {
 knapp = 
 } annet {
 knapp = 
 }
 komme tilbake (
 <>
 {logget inn}
 )
}

I koden ovenfor opprettet du først komponentene Logg inn og Logg ut-knappen, og definer deretter komponent for å gjengi hver av dem under forskjellige forhold.

I denne komponenten, bruk React state hook for å holde styr på når brukeren er pålogget.

I slekt: Mestre reaksjonsferdighetene dine ved å lære disse ekstra krokene

Nå, avhengig av staten enten gjengi eller komponent.

Hvis brukeren ikke er pålogget, gjengi komponent ellers gjengi the komponent. De to håndtaksfunksjonene endrer påloggingstilstanden når den respektive knappen klikkes.

Bruke logiske operatører

Du kan bruke logisk && operatør for å betinget gjengi et element. Her gjengis et element bare hvis betingelsen evalueres til sann ellers ignoreres den.

Hvis du vil varsle en bruker om antall varsler de har kun når de har ett eller flere varsler, kan du bruke følgende.

funksjon ShowNotifications (rekvisitter) {
 const { notifications } = rekvisitter
 komme tilbake (
 <>
 {notifications.length > 0 &&

 Du har {notifications.length} varsler.


 }
 )
}

Deretter, for å gjengi et element hvis det logiske &&-uttrykket evalueres til en falsk verdi, kjede den logiske || operatør.

Følgende funksjon viser meldingen "Du har ingen varsler" hvis ingen varsler sendes som rekvisitter.

funksjon ShowNotifications (rekvisitter) {
 const { notifications } = rekvisitter
 komme tilbake (
 <>
 {notifications.length > 0 &&

 Du har {notifications.length} varsler.
 || 
Du har ingen varsler

 }
 )
}

Hindre en komponent i å gjengi

For å skjule en komponent selv om den ble gjengitt av en annen komponent, returner null i stedet for utdata.

Tenk på følgende komponent som bare gjengir en advarselsknapp hvis en advarsel sendes som rekvisitter.

funksjon Advarsel (rekvisitter) {
 const {warningMessage} = rekvisitter
 if (!warningMessage) {
 returner null
 }
 komme tilbake (
 <>
Advarsel
 )
}

Nå, hvis du sender inn 'advarselsmelding' til komponent, vil en advarselsknapp bli gjengitt. Men hvis du ikke gjør det, vil returnere null og knappen vil ikke vises.

 // advarselsknappen gjengis
 // advarselsknappen gjengis ikke

Eksempler på betinget gjengivelse i Real-Life React-applikasjoner

Bruk betinget gjengivelse for å utføre forskjellige oppgaver i applikasjonen. Noen av disse inkluderer gjengivelse av API-data bare når de er tilgjengelige og visning av en feilmelding bare når en feil eksisterer.

Gjengivelse av data hentet fra et API i React

Å hente data fra et API kan ta en stund. Sjekk derfor først om den er tilgjengelig før du bruker den i applikasjonen din, ellers vil React gi en feilmelding hvis den ikke er tilgjengelig.

Følgende funksjon viser hvordan du kan betinget gjengi data returnert av en API.

funksjon FetchData() {
 const [data, setData] = useState (null);
 const apiURL = " https://api.nasa.gov/planetary/apod? api_key=DEMO_KEY";
 // Hent data fra API ved hjelp av Axios
 const fetchData = async () => {
 const response = vent axios.get (apiURL)
 // Oppdater tilstand med dataene
 setData (response.data) 
 }
 komme tilbake (
 <>
Dagens astronomibilde

 {
 data && 
{data.title}

{data.explanation}

 }
 )
}

I funksjonen ovenfor henter du dataene fra NASA Apod API bruker Axios. Når API-en returnerer et svar, oppdater tilstanden og bruk logisk &&-operator for bare å gjengi dataene når de er tilgjengelige.

I slekt: Hvordan konsumere APIer i React ved å bruke Fetch og Axios

Viser feilmeldinger

I tilfeller der du vil vise en feil bare når den eksisterer, bruk betinget gjengivelse.

For eksempel, hvis du oppretter et skjema og vil vise en feilmelding hvis en bruker skrev i feil e-postformat, oppdater tilstanden med feilmeldingen og bruk en if-setning for å gjengi den.

function showError() {
 const [error, setError] = useState (null)
 komme tilbake (
 <>
 {
 if (feil) {
Det oppstod en feil: {error}

 }
 }
 )
}

Velge hva du skal bruke i React-appen din

I denne opplæringen lærte du om flere måter som kan betinget gjengi JSX-elementer.

Alle metodene som er diskutert gir de samme resultatene. Ta et valg om hva du skal bruke avhengig av brukstilfellet, og nivået av lesbarhet du ønsker å oppnå.

7 beste gratis veiledninger for å lære å reagere og lage nettapper

Gratiskurs er sjelden like omfattende og nyttige – men vi har funnet flere React-kurs som er utmerket og som vil hjelpe deg i gang på rett fot.

Les Neste

Om forfatteren