Redarea condiționată se referă la schimbarea comportamentului unei aplicații în funcție de starea acesteia. De exemplu, puteți schimba mesajul de salut al aplicației React la întuneric în timpul nopții. În acest fel, aveți un mesaj de afișare diferit în funcție de ora din zi.
Redarea condiționată vă permite să randați diferite componente sau elemente React dacă o condiție este îndeplinită. În acest tutorial, veți afla despre diferitele moduri în care puteți utiliza redarea condiționată în aplicațiile React.js.
Modalități în care puteți implementa randarea condiționată
Pentru a urma aceste exemple, trebuie să aveți o înțelegere de bază a modului în care funcționează React. Dacă aveți dificultăți în acest caz, nu vă faceți griji - avem un util ghid pentru începători pentru React.js.
Utilizarea instrucțiunilor condiționate
Ca și în JavaScript, puteți folosi instrucțiuni condiționale precum if...else pentru a crea elemente atunci când sunt îndeplinite anumite condiții.
dacă blocați atunci când este îndeplinită o condiție și afișați una diferită în altfel blocați dacă condiția nu este îndeplinită.
Luați în considerare următorul exemplu care fie afișează un buton de conectare sau de deconectare, în funcție de starea de conectare a utilizatorului.
funcția Tabloul de bord (recuzită) { const { isLoggedIn } = props dacă (este conectat){ întoarcere } altfel{ întoarcere } }
Această funcție redă un buton diferit în funcție de esteLoggedIn valoare trecută ca prop.
Legate de: Cum să utilizați elementele de recuzită în ReactJS
Alternativ, puteți utiliza operatorul ternar. Operatorul ternar preia o condiție urmată de cod pentru a se executa dacă condiția este adevărul urmat de codul de executat dacă condiția este fals.
Rescrieți funcția de mai sus ca:
funcția Tabloul de bord (recuzită) { const { isLoggedIn } = props întoarcere ( <> {este conectat?
Operatorul ternar face funcția mai curată și mai ușor de citit în comparație cu daca...altfel afirmație.
Declararea variabilelor elementului
Variabilele element sunt variabile care pot deține elemente JSX și pot fi redate atunci când este necesar într-o aplicație React.
Puteți utiliza variabile de element pentru a reda doar o anumită parte a componentei atunci când aplicația dvs. îndeplinește condiția specificată.
De exemplu, dacă doriți să redați doar un buton de conectare atunci când utilizatorul nu este conectat și un buton de deconectare numai atunci când este conectat, puteți utiliza variabile de element.
funcția LoginBtn (recuzită) { întoarcere ( Autentificare
); } funcția LogoutBtn (recuzită) { întoarcere ( Deconectare
În codul de mai sus, creați mai întâi componentele butonului Conectare și Deconectare, apoi definiți componentă pentru a reda fiecare dintre ele în condiții diferite.
În această componentă, utilizați cârligul de stare React pentru a ține evidența când utilizatorul este conectat.
Legate de: Stăpânește-ți abilitățile de reacție învățând aceste cârlige suplimentare
Acum, în funcție de stat, fie reda sau componentă.
Dacă utilizatorul nu este autentificat, redați fișierul componenta altfel reda the componentă. Cele două funcții de mâner schimbă starea de conectare atunci când se face clic pe butonul respectiv.
Utilizarea operatorilor logici
Puteți folosi logica && operator pentru a reda condiționat un element. Aici un element este redat numai dacă condiția este evaluată la adevărată, altfel este ignorată.
Dacă doriți să notificați un utilizator cu privire la numărul de notificări pe care le are doar atunci când are una sau mai multe notificări, puteți utiliza următoarele.
Pentru a ascunde o componentă chiar dacă a fost redată de o altă componentă, returnați null, în loc de rezultatul acesteia.
Luați în considerare următoarea componentă care redă un buton de avertizare numai dacă un mesaj de avertizare este transmis ca elemente de recuzită.
funcția Avertisment (recuzită) { const {warningMessage} = recuzită dacă (!Mesaj de avertizare) { returnează nul } întoarcere ( <> Avertizare ) }
Acum, dacă transmiteți „Mesaj de avertizare” către componentă, va fi redat un buton de avertizare. Cu toate acestea, dacă nu, va returna null și butonul nu va fi afișat.
// butonul de avertizare este redat // butonul de avertizare nu este redat
Exemple de randare condiționată în aplicațiile React din viața reală
Utilizați redarea condiționată pentru a îndeplini diferite sarcini în aplicația dvs. Unele dintre acestea includ redarea datelor API numai atunci când acestea sunt disponibile și afișarea unui mesaj de eroare numai atunci când există o eroare.
Redarea datelor preluate dintr-un API în React
Preluarea datelor dintr-un API poate dura ceva timp. Prin urmare, mai întâi, verificați dacă este disponibil înainte de a-l folosi în aplicația dvs., altfel React va afișa o eroare dacă nu este disponibil.
Următoarea funcție arată cum puteți reda condiționat datele returnate de un API.
În funcția de mai sus, preluați datele din NASA Apod API folosind Axios. Când API-ul returnează un răspuns, actualizați starea și utilizați operatorul logic && pentru a reda datele numai atunci când acestea sunt disponibile.
Legate de: Cum să consumați API-uri în React folosind Fetch și Axios
Afișarea mesajelor de eroare
În cazurile în care doriți să afișați o eroare numai atunci când aceasta există, utilizați randarea condiționată.
De exemplu, dacă creați un formular și doriți să afișați un mesaj de eroare dacă un utilizator a tastat într-un format de e-mail greșit, actualizați starea cu mesajul de eroare și utilizați o declarație if pentru a-l reda.
funcția showError() { const [eroare, setError] = useState (null) întoarcere ( <> { dacă (eroare) {
A apărut o eroare: {eroare}
} } ) }
Alegeți ce să utilizați în aplicația dvs. React
În acest tutorial, ați învățat despre mai multe moduri prin care pot reda condiționat elemente JSX.
Toate metodele discutate oferă aceleași rezultate. Alegeți ce să utilizați în funcție de cazul de utilizare și de nivelul de lizibilitate pe care doriți să-l atingeți.
7 cele mai bune tutoriale gratuite pentru a învăța React și a crea aplicații web
Cursurile gratuite sunt rareori la fel de cuprinzătoare și utile -- dar am găsit câteva cursuri React care sunt excelente și vă vor ajuta să începeți cu piciorul bun.
Citiți în continuare
AcțiuneAcțiuneTweetE-mail
Subiecte asemănătoare
Programare
Reacţiona
Programare
Instrumente de programare
Despre autor
Mary Gathoni (6 articole publicate)
Mary Gathoni este un dezvoltator de software cu o pasiune pentru crearea de conținut tehnic care nu este doar informativ, ci și antrenant. Când nu codifică sau nu scrie, îi place să iasă cu prietenii și să fie în aer liber.
Mai multe de la Mary Gathoni
Aboneaza-te la newsletter-ul nostru
Alăturați-vă buletinului nostru informativ pentru sfaturi tehnice, recenzii, cărți electronice gratuite și oferte exclusive!