Pogojno upodabljanje se nanaša na spreminjanje obnašanja aplikacije glede na njeno stanje. Na primer, lahko ponoči spremenite pozdravno sporočilo v aplikaciji React v temno. Na ta način imate različno prikazano sporočilo glede na čas dneva.

Pogojno upodabljanje vam omogoča upodabljanje različnih komponent ali elementov Reacta, če je pogoj izpolnjen. V tej vadnici se boste naučili o različnih načinih uporabe pogojnega upodabljanja v aplikacijah React.js.

Načini za izvedbo pogojnega upodabljanja

Če želite slediti tem primerom, morate imeti osnovno razumevanje, kako deluje React. Če imate težave v tem primeru, ne skrbite – imamo koristno vodnik za začetnike za React.js.

Uporaba pogojnih stavkov

Tako kot v JavaScriptu lahko uporabite pogojne stavke, kot je if…else, da ustvarite elemente, ko so izpolnjeni določeni pogoji.

Na primer, lahko prikažete določen element v če blokirajte, ko je izpolnjen pogoj, in prikažite drugega v drugo blokira, če pogoj ni izpolnjen.

Razmislite o naslednjem primeru, ki prikazuje gumb za prijavo ali odjavo, odvisno od statusa prijave uporabnika.

funkcija nadzorna plošča (rekviziti) {
 const { isLoggedIn } = rekviziti
 če (isLoggedIn){
 vrnitev Odjava
 } drugo{
 vrnitev Vpiši se
 }
}

Ta funkcija upodablja drugačen gumb glede na jePrijavljen vrednost, posredovana kot prop.

Povezano: Kako uporabljati rekvizite v ReactJS

Lahko pa uporabite tudi ternarni operater. Ternarni operater prevzame pogoj, ki mu sledi koda, da se izvede, če je pogoj res resnica ki ji sledi koda za izvedbo, če je pogoj lažno.

Zgornjo funkcijo prepišite kot:

funkcija nadzorna plošča (rekviziti) {
 const { isLoggedIn } = rekviziti
 vrnitev (
 <>
 {isLogged?Odjava:Vpiši se)
 )
}

Ternarni operater naredi funkcijo čistejšo in lažje berljivo v primerjavi z če potem izjava.

Deklaracija spremenljivk elementov

Spremenljivke elementov so spremenljivke, ki lahko vsebujejo elemente JSX in se po potrebi upodobijo v aplikaciji React.

Spremenljivke elementa lahko uporabite za upodabljanje samo določenega dela komponente, ko vaša aplikacija izpolnjuje določen pogoj.

Na primer, če želite upodobiti samo gumb za prijavo, ko uporabnik ni prijavljen, in gumb za odjavo samo, ko je prijavljen, lahko uporabite spremenljivke elementa.

funkcija LoginBtn (rekviziti) {
 vrnitev (

 Vpiši se

 );
}
funkcija OdjavaBtn (rekviziti) {
 vrnitev (

 Odjava

 );
}
funkcija nadzorna plošča() {
 const [loggedIn, setLoggedIn] = useState (true)
 const handleLogin = () => {
 setLoggedIn (true)
 }
 const handleLogout = () => {
 setLoggedIn (false)
 }
 gumb pusti;
 če (prijavljen) {
 gumb = 
 } drugo {
 gumb = 
 }
 vrnitev (
 <>
 {prijavljeni}
 )
}

V zgornji kodi ste najprej ustvarili komponenti gumbov za prijavo in odjavo, nato pa definirajte komponento za upodobitev vsakega od njih pod različnimi pogoji.

V tej komponenti uporabite kljuko stanja React, da spremljate, kdaj je uporabnik prijavljen.

Povezano: Obvladajte svoje sposobnosti reagiranja z učenjem teh dodatnih kavljev

Zdaj, odvisno od stanja, bodisi upodobite oz komponento.

Če uporabnik ni prijavljen, upodabljajte komponenta sicer upodablja the komponento. Dve funkciji ročaja spremenita prijavno stanje, ko kliknete ustrezni gumb.

Uporaba logičnih operaterjev

Lahko uporabite logično && operator za pogojno upodabljanje elementa. Tukaj je element upodobljen le, če je pogoj ovrednoten kot resničen, sicer je prezrt.

Če želite uporabnika obvestiti o številu obvestil, ki jih ima le, če ima eno ali več obvestil, lahko uporabite naslednje.

funkcija ShowNotifications (rekviziti) {
 const { obvestila } = rekviziti
 vrnitev (
 <>
 {notifications.length > 0 &&

 Imate {notifications.length} obvestil.


 }
 )
}

Nato za upodobitev elementa, če se logični izraz && ovrednoti na napačno vrednost, verižite logično || operaterja.

Naslednja funkcija prikaže sporočilo »Nimate obvestil«, če nobeno obvestilo ni posredovano kot rekvizit.

funkcija ShowNotifications (rekviziti) {
 const { obvestila } = rekviziti
 vrnitev (
 <>
 {notifications.length > 0 &&

 Imate {notifications.length} obvestil.
 || 
Nimate nobenih obvestil

 }
 )
}

Preprečite upodabljanje komponente

Če želite skriti komponento, čeprav jo je upodabljala druga komponenta, namesto njenega izhoda vrnite nič.

Razmislite o naslednji komponenti, ki upodablja opozorilni gumb samo, če je opozorilno sporočilo posredovano kot rekvizit.

funkcija Opozorilo (rekviziti) {
 const {warningMessage} = rekviziti
 če (!warningMessage) {
 vrni null
 }
 vrnitev (
 <>
Opozorilo
 )
}

Zdaj, če podate 'warningMessage' v komponento, bo prikazan opozorilni gumb. Vendar, če ne, bo vrnil nič in gumb ne bo prikazan.

 // prikazan je opozorilni gumb
 // opozorilni gumb ni upodobljen

Primeri pogojnega upodabljanja v resničnih aplikacijah React

Uporabite pogojno upodabljanje za izvajanje različnih nalog v vaši aplikaciji. Nekateri od teh vključujejo upodabljanje podatkov API le, če so na voljo, in prikaz sporočila o napaki le, če napaka obstaja.

Upodabljanje podatkov, pridobljenih iz API-ja v Reactu

Pridobivanje podatkov iz API-ja lahko traja nekaj časa. Zato najprej preverite, ali je na voljo, preden ga uporabite v svoji aplikaciji, sicer bo React prikazal napako, če ni na voljo.

Naslednja funkcija prikazuje, kako lahko pogojno upodabljate podatke, ki jih vrne API.

funkcija FetchData() {
 const [data, setData] = useState (null);
 const apiURL = " https://api.nasa.gov/planetary/apod? api_key=DEMO_KEY";
 // Pridobite podatke iz API-ja z uporabo Axiosa
 const fetchData = async () => {
 const odgovor = await axios.get (apiURL)
 // Posodobi stanje s podatki
 setData (response.data) 
 }
 vrnitev (
 <>
Astronomska slika dneva

 {
 podatki && 
{data.title}

{data.explanation}

 }
 )
}

V zgornji funkciji pridobite podatke iz NASA Apod API z uporabo Axiosa. Ko API vrne odgovor, posodobite stanje in uporabite logični operator &&, da podatke upodablja samo, ko so na voljo.

Povezano: Kako porabiti API-je v Reactu z uporabo Fetch in Axios

Prikaz sporočil o napakah

V primerih, ko želite prikazati napako samo takrat, ko obstaja, uporabite pogojno upodabljanje.

Če na primer ustvarjate obrazec in želite prikazati sporočilo o napaki, če je uporabnik vnesel napačno obliko e-pošte, posodobite stanje s sporočilom o napaki in uporabite stavek if, da ga upodabljate.

funkcija showError() {
 const [napaka, setError] = useState (null)
 vrnitev (
 <>
 {
 če (napaka) {
Prišlo je do napake: {error}

 }
 }
 )
}

Izbira, kaj uporabiti v aplikaciji React

V tej vadnici ste spoznali več načinov, kako lahko pogojno upodablja elemente JSX.

Vse obravnavane metode dajejo enake rezultate. Odločite se, kaj boste uporabili, odvisno od primera uporabe in stopnje berljivosti, ki jo želite doseči.

7 najboljših brezplačnih vadnic za učenje React in izdelavo spletnih aplikacij

Brezplačni tečaji so le redko tako obsežni in koristni – vendar smo našli več tečajev React, ki so odlični in vam bodo pomagali začeti na pravi nogi.

Preberite Naprej

O avtorju