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.

De exemplu, puteți afișa un element specificat în

instagram viewer
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 (

);
}
funcția LogoutBtn (recuzită) {
întoarcere (

);
}
function Dashboard() {
const [loggedIn, setLoggedIn] = useState (adevărat)
const handleLogin = () => {
setLoggedIn (adevărat)
}
const handleLogout = () => {
setLoggedIn (fals)
}
buton de lasare;
dacă (conectat) {
butonul =
} altfel {
butonul =
}
întoarcere (
<>
{conectat}
)
}

Î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.

funcția ShowNotifications (recuzită) {
const { notificări } = props
întoarcere (
<>
{notifications.length > 0 &&


Aveți {notifications.length} notificări.


}
)
}

Apoi, pentru a reda un element dacă expresia logică && evaluează la o valoare falsă, înlănțuiți logica || operator.

Următoarea funcție afișează mesajul „Nu aveți notificări” dacă nu sunt transmise notificări ca elemente de recuzită.

funcția ShowNotifications (recuzită) {
const { notificări } = props
întoarcere (
<>
{notifications.length > 0 &&


Aveți {notifications.length} notificări.

||

Nu ai notificări


}
)
}

Împiedicați redarea unei componente

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 (
<>

)
}

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.

funcția FetchData() {
const [date, setData] = useState (null);
const apiURL = " https://api.nasa.gov/planetary/apod? api_key=DEMO_KEY";
// Preluați datele din API folosind Axios
const fetchData = async () => {
răspuns constant = așteptați axios.get (apiURL)
// Actualizați starea cu datele
setData (response.data)
}
întoarcere (
<>

Poza astronomică a zilei


{
date &&

{data.title}


{data.explication}


}
)
}

Î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ț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!

Click aici pentru a te abona