Uvjetno renderiranje odnosi se na promjenu ponašanja aplikacije ovisno o njenom stanju. Na primjer, možete promijeniti pozdravnu poruku svoje React aplikacije u tamnu tijekom noći. Na ovaj način imate različitu poruku na zaslonu ovisno o dobu dana.

Uvjetno renderiranje omogućuje vam renderiranje različitih React komponenti ili elemenata ako je uvjet ispunjen. U ovom vodiču naučit ćete o različitim načinima na koje možete koristiti uvjetno renderiranje u React.js aplikacijama.

Načini na koje možete implementirati uvjetno renderiranje

Da biste slijedili ove primjere, morate imati osnovno razumijevanje kako React radi. Ako imate poteškoća u tom slučaju, ne brinite - imamo koristan vodič za početnike za React.js.

Korištenje uvjetnih izjava

Kao u JavaScriptu, možete koristiti uvjetne izraze kao što je if…else za stvaranje elemenata kada su ispunjeni određeni uvjeti.

Na primjer, možete prikazati određeni element u ako blokirati kada je uvjet ispunjen i prikazati drugi u drugo blokirati ako uvjet nije ispunjen.

Razmotrite sljedeći primjer koji ili prikazuje gumb za prijavu ili odjavu ovisno o statusu prijave korisnika.

funkcija Nadzorna ploča (rekviziti) {
 const { isLoggedIn } = rekviziti
 if (isLoggedIn){
 povratak Odjavite se
 } ostalo{
 povratak Prijaviti se
 }
}

Ova funkcija prikazuje različitu tipku ovisno o isLoggedIn vrijednost proslijeđena kao prop.

Povezano: Kako koristiti rekvizite u ReactJS-u

Alternativno, možete koristiti ternarni operator. Ternarni operator preuzima uvjet nakon kojeg slijedi kod za izvršenje ako uvjet postoji istina nakon čega slijedi kod za izvršenje ako je uvjet lažno.

Prepišite gornju funkciju kao:

funkcija Nadzorna ploča (rekviziti) {
 const { isLoggedIn } = rekviziti
 vratiti (
 <>
 {isLogged?Odjavite se:Prijaviti se)
 )
}

Ternarni operator čini funkciju čišćom i lakšom za čitanje u usporedbi s ako… inače izjava.

Deklariranje varijabli elemenata

Varijable elementa su varijable koje mogu sadržavati JSX elemente i biti prikazane kada je to potrebno u React aplikaciji.

Možete koristiti varijable elementa za renderiranje samo određenog dijela komponente kada vaša aplikacija ispunjava navedeni uvjet.

Na primjer, ako želite prikazati samo gumb za prijavu kada korisnik nije prijavljen i gumb za odjavu samo kada je prijavljen, možete koristiti varijable elementa.

funkcija LoginBtn (rekviziti) {
 vratiti (

 Prijaviti se

 );
}
funkcija OdjavaBtn (rekviziti) {
 vratiti (

 Odjavite se

 );
}
funkcija nadzorna ploča() {
 const [loggedIn, setLoggedIn] = useState (true)
 const handleLogin = () => {
 setLoggedIn (točno)
 }
 const handleOdjava = () => {
 setLoggedIn (lažno)
 }
 pusti gumb;
 if (prijavljen) {
 gumb = 
 } ostalo {
 gumb = 
 }
 vratiti (
 <>
 {prijavljeni}
 )
}

U gornjem kodu prvo su kreirane komponente gumba Prijava i Odjava, a zatim definirajte komponentu za prikaz svakog od njih u različitim uvjetima.

U ovoj komponenti koristite zakačicu stanja React kako biste pratili kada je korisnik prijavljen.

Povezano: Savladajte svoje vještine reagiranja učeći ove dodatne kuke

Sada, ovisno o stanju ili render the ili komponenta.

Ako korisnik nije prijavljen, renderirajte komponenta inače render the komponenta. Dvije funkcije ručke mijenjaju stanje prijave kada se klikne odgovarajući gumb.

Korištenje logičkih operatora

Možete koristiti logično && operator za uvjetno generiranje elementa. Ovdje se element prikazuje samo ako se uvjet procijeni na istinito, inače se zanemaruje.

Ako želite obavijestiti korisnika o broju obavijesti koje ima samo kada ima jednu ili više obavijesti, možete koristiti sljedeće.

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

 Imate {notifications.length} obavijesti.


 }
 )
}

Zatim, da biste generirali element ako logički && izraz procijeni na lažnu vrijednost, ulančajte logički || operater.

Sljedeća funkcija prikazuje poruku "Nemate obavijesti" ako nijedna obavijest nije proslijeđena kao rekviziti.

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

 Imate {notifications.length} obavijesti.
 || 
Nemate obavijesti

 }
 )
}

Spriječite renderiranje komponente

Da biste sakrili komponentu iako ju je prikazala druga komponenta, vratite null umjesto njezinog izlaza.

Razmotrite sljedeću komponentu koja prikazuje gumb upozorenja samo ako je poruka upozorenja proslijeđena kao props.

funkcija Upozorenje (rekviziti) {
 const {warningMessage} = rekviziti
 if (!warningMessage) {
 vrati null
 }
 vratiti (
 <>
Upozorenje
 )
}

Sada, ako proslijedite 'warningMessage' na komponente, prikazat će se gumb upozorenja. Međutim, ako to ne učinite, vratit će null i gumb neće biti prikazan.

 // prikazan je gumb upozorenja
 // gumb upozorenja nije prikazan

Primjeri uvjetnog renderiranja u realnim React aplikacijama

Upotrijebite uvjetno renderiranje za postizanje različitih zadataka u svojoj aplikaciji. Neki od njih uključuju renderiranje API podataka samo kada su dostupni i prikazivanje poruke o pogrešci samo kada pogreška postoji.

Renderiranje podataka dohvaćenih iz API-ja u Reactu

Dohvaćanje podataka iz API-ja može potrajati. Stoga, prvo provjerite je li dostupan prije nego što ga upotrijebite u svojoj aplikaciji, inače će React ispisati pogrešku ako nije dostupan.

Sljedeća funkcija pokazuje kako možete uvjetno prikazati podatke koje vraća API.

funkcija Dohvaćanje podataka() {
 const [podaci, setData] = useState (null);
 const apiURL = " https://api.nasa.gov/planetary/apod? api_key=DEMO_KEY";
 // Dohvaćanje podataka iz API-ja pomoću Axiosa
 const fetchData = async () => {
 const odgovor = čekaj axios.get (apiURL)
 // Ažuriraj stanje s podacima
 setData (response.data) 
 }
 vratiti (
 <>
Astronomska slika dana

 {
 podaci && 
{data.title}

{data.explanation}

 }
 )
}

U gornjoj funkciji dohvatite podatke iz NASA Apod API pomoću Axiosa. Kada API vrati odgovor, ažurirajte stanje i upotrijebite logički operator && da biste podatke prikazali samo kada su dostupni.

Povezano: Kako konzumirati API-je u Reactu koristeći Fetch i Axios

Prikaz poruka o pogrešci

U slučajevima kada želite prikazati pogrešku samo kada postoji, koristite uvjetno prikazivanje.

Na primjer, ako izrađujete obrazac i želite prikazati poruku o pogrešci ako je korisnik unio pogrešan format e-pošte, ažurirajte stanje porukom o pogrešci i upotrijebite izraz if da biste je prikazali.

funkcija showError() {
 const [pogreška, setError] = useState (null)
 vratiti (
 <>
 {
 if (greška) {
Došlo je do pogreške: {error}

 }
 }
 )
}

Odabir onoga što ćete koristiti u vašoj React aplikaciji

U ovom vodiču naučili ste o nekoliko načina na koje se uvjetno mogu prikazati JSX elementi.

Sve navedene metode daju iste rezultate. Odaberite što ćete koristiti ovisno o slučaju upotrebe i razini čitljivosti koju želite postići.

7 najboljih besplatnih tutorijala za učenje reagiranja i izradu web aplikacija

Besplatni tečajevi rijetko su tako sveobuhvatni i korisni – ali pronašli smo nekoliko React tečajeva koji su izvrsni i koji će vam pomoći da počnete na pravom putu.

Pročitajte dalje

O autoru