Nosacītā renderēšana attiecas uz lietotnes darbības maiņu atkarībā no tās stāvokļa. Piemēram, varat mainīt savas lietotnes React sveiciena ziņojumu uz tumšu nakts laikā. Tādā veidā jums ir atšķirīgs displeja ziņojums atkarībā no diennakts laika.

Nosacītā renderēšana ļauj renderēt dažādus React komponentus vai elementus, ja ir izpildīts kāds nosacījums. Šajā apmācībā jūs uzzināsit par dažādiem veidiem, kā varat izmantot nosacījumu renderēšanu React.js lietojumprogrammās.

Veidi, kā ieviest nosacījumu renderēšanu

Lai sekotu šiem piemēriem, jums ir jābūt pamata izpratnei par React darbību. Ja šajā gadījumā jums ir grūtības, neuztraucieties — mums ir noderīga ceļvedis iesācējiem vietnē React.js.

Nosacījumu paziņojumu izmantošana

Tāpat kā JavaScript, varat izmantot nosacījumu paziņojumus, piemēram, if…else, lai izveidotu elementus, ja ir izpildīti noteikti nosacījumi.

Piemēram, jūs varat parādīt noteiktu elementu ja bloķēt, ja nosacījums ir izpildīts, un parādīt citu cits bloķēt, ja nosacījums nav izpildīts.

Apsveriet šādu piemēru, kurā atkarībā no lietotāja pieteikšanās statusa tiek parādīta pieteikšanās vai atteikšanās poga.

function Informācijas panelis (rekvizīti) {
 const {isLoggedIn} = rekvizīti
 if (ir LoggedIn){
 atgriezties Izlogoties
 } cits{
 atgriezties Pieslēgties
 }
}

Šī funkcija atveido citu pogu atkarībā no isLoggedIn vērtība nodota kā butaforija.

Saistīts: Kā lietot rekvizītus programmā ReactJS

Varat arī izmantot trīskāršu operatoru. Trīskāršais operators uzņem nosacījumu, kam seko izpildāmais kods, ja nosacījums ir patiess kam seko izpildāmais kods, ja nosacījums ir viltus.

Pārrakstiet iepriekš minēto funkciju šādi:

function Informācijas panelis (rekvizīti) {
 const {isLoggedIn} = rekvizīti
 atgriezties (
 <>
 {isLogged?Izlogoties:Pieslēgties)
 )
}

Trīskāršais operators padara funkciju tīrāku un vieglāk lasāmu, salīdzinot ar ja… citādi paziņojums, apgalvojums.

Elementu mainīgo deklarēšana

Elementu mainīgie ir mainīgie, kuros var būt JSX elementi un kurus vajadzības gadījumā atveidot React lietotnē.

Varat izmantot elementu mainīgos, lai renderētu tikai noteiktu komponenta daļu, kad jūsu lietojumprogramma atbilst norādītajam nosacījumam.

Piemēram, ja vēlaties renderēt tikai pieteikšanās pogu, kad lietotājs nav pierakstījies, un atteikšanās pogu tikai tad, kad viņš ir pierakstījies, varat izmantot elementu mainīgos.

function LoginBtn (rekvizīti) {
 atgriezties (

 Pieslēgties

 );
}
function LogoutBtn (rekvizīti) {
 atgriezties (

 Izlogoties

 );
}
function Dashboard() {
 const [loggedIn, setLoggedIn] = useState (true)
 const handleLogin = () => {
 setLoggedIn (true)
 }
 const handleLogout = () => {
 setLoggedIn (false)
 }
 ļaut poga;
 if (pieteicies) {
 poga = 
 } cits {
 poga = 
 }
 atgriezties (
 <>
 {pieteicies}
 )
}

Iepriekš minētajā kodā vispirms izveidojiet pogas Pieteikties un Atteikties, pēc tam definējiet komponentu, lai atveidotu katru no tiem dažādos apstākļos.

Šajā komponentā izmantojiet React State Hook, lai izsekotu, kad lietotājs ir pieteicies.

Saistīts: Apgūstiet savas reaģēšanas prasmes, apgūstot šos papildu āķus

Tagad, atkarībā no valsts, vai nu renderējiet vai komponents.

Ja lietotājs nav pieteicies, renderējiet komponents citādi padara the komponents. Abas roktura funkcijas maina pieteikšanās stāvokli, noklikšķinot uz attiecīgās pogas.

Loģisko operatoru izmantošana

Jūs varat izmantot loģisko && operatoru, lai nosacīti renderētu elementu. Šeit elements tiek renderēts tikai tad, ja nosacījums tiek novērtēts kā patiess, pretējā gadījumā tas tiek ignorēts.

Ja vēlaties informēt lietotāju par viņam pieejamo paziņojumu skaitu tikai tad, ja viņam ir viens vai vairāki paziņojumi, varat izmantot tālāk norādīto.

function ShowNotifications (rekvizīti) {
 const {paziņojumi} = rekvizīti
 atgriezties (
 <>
 {notifications.length > 0 &&

 Jums ir {notifications.length} paziņojumi.


 }
 )
}

Pēc tam, lai renderētu elementu, ja loģiskā && izteiksme tiek novērtēta kā nepatiesa vērtība, saķēdējiet loģisko || operators.

Ja paziņojumi netiek nodoti kā rekvizīti, tālāk norādītā funkcija parāda ziņojumu “Jums nav paziņojumu”.

function ShowNotifications (rekvizīti) {
 const {paziņojumi} = rekvizīti
 atgriezties (
 <>
 {notifications.length > 0 &&

 Jums ir {notifications.length} paziņojumi.
 || 
Jums nav paziņojumu

 }
 )
}

Novērst komponenta renderēšanu

Lai paslēptu komponentu, pat ja to renderējis cits komponents, tā izvades vietā atgrieziet nulli.

Apsveriet šādu komponentu, kas parāda brīdinājuma pogu tikai tad, ja brīdinājuma ziņojums tiek nodots kā rekvizīts.

funkcija Brīdinājums (rekvizīti) {
 const {warningMessage} = rekvizīti
 if (!warningMessage) {
 atgriezties null
 }
 atgriezties (
 <>
Brīdinājums
 )
}

Tagad, ja nosūtāt “brīdinājuma ziņojumu” uz komponents, tiks parādīta brīdinājuma poga. Tomēr, ja jums tā nav, atgriezīs nulli, un poga netiks parādīta.

 // tiek atveidota brīdinājuma poga
 // brīdinājuma poga netiek renderēta

Nosacītā renderēšanas piemēri reālās dzīves reaģēšanas lietojumprogrammās

Izmantojiet nosacījumu renderēšanu, lai lietojumprogrammā veiktu dažādus uzdevumus. Daži no tiem ietver API datu renderēšanu tikai tad, ja tie ir pieejami, un kļūdas ziņojuma rādīšanu tikai tad, ja pastāv kļūda.

Datu renderēšana, kas iegūti no API programmā React

Datu iegūšana no API var aizņemt kādu laiku. Tāpēc vispirms pārbaudiet, vai tas ir pieejams, pirms to izmantojat savā lietojumprogrammā, pretējā gadījumā React parādīs kļūdu, ja tā nav pieejama.

Šī funkcija parāda, kā jūs varat nosacīti renderēt API atgrieztos datus.

function FetchData() {
 const [dati, setData] = useState (null);
 const apiURL = " https://api.nasa.gov/planetary/apod? api_key=DEMO_KEY";
 // Iegūstiet datus no API, izmantojot Axios
 const fetchData = async () => {
 const atbilde = gaidiet axios.get (apiURL)
 // Atjaunināt stāvokli ar datiem
 setData (response.data) 
 }
 atgriezties (
 <>
Dienas astronomijas attēls

 {
 dati && 
{data.title}

{data.explanation}

 }
 )
}

Iepriekš minētajā funkcijā iegūstiet datus no NASA Apod API izmantojot Axios. Kad API atgriež atbildi, atjauniniet stāvokli un izmantojiet loģisko && operatoru, lai dati tiktu renderēti tikai tad, kad tie ir pieejami.

Saistīts: Kā lietot API programmā React, izmantojot funkciju Fetch un Axios

Parāda kļūdu ziņojumus

Gadījumos, kad kļūdu vēlaties parādīt tikai tad, kad tā pastāv, izmantojiet nosacījumu renderēšanu.

Piemēram, ja veidojat veidlapu un vēlaties parādīt kļūdas ziņojumu, ja lietotājs ierakstījis nepareizā e-pasta formātā, atjauniniet statusu ar kļūdas ziņojumu un izmantojiet if priekšrakstu, lai to renderētu.

function showError() {
 const [kļūda, setError] = useState (null)
 atgriezties (
 <>
 {
 if (kļūda) {
Radās kļūda: {error}

 }
 }
 )
}

Izvēlēties, ko izmantot savā React lietotnē

Šajā apmācībā jūs uzzinājāt par vairākiem veidiem, kā nosacīti renderēt JSX elementus.

Visas apspriestās metodes nodrošina vienādus rezultātus. Izvēlieties, ko izmantot, atkarībā no lietošanas gadījuma un lasāmības līmeņa, ko vēlaties sasniegt.

7 labākās bezmaksas apmācības, lai mācītos reaģēt un izveidotu tīmekļa lietotnes

Bezmaksas kursi reti ir tik visaptveroši un noderīgi, taču mēs esam atraduši vairākus React kursus, kas ir lieliski un palīdzēs jums sākt pareizi.

Lasiet Tālāk

Par autoru