React nosacījumu renderēšana

Izlasot manus iepriekšējos rakstus jums vajadzētu būt pazīstamam ar jēdzienu, ka React dinamiski maina tīmekļa lapas saturu. Piemēram, jūs atklājat, ka tad, kad viņi reaģē uz vietnes izmaiņām no “Homepage” teksta uz tekstu “About Me”, tā nepāriet uz jaunu lapu, tā atveido vienu komponentu, nevis citu. Lai gan tas ir noderīgi, jums ir jāsniedz ļoti specifiski norādījumi par to, ko renderēt un ko ne. Un, ja jums ir komponenti, kas reaģē uz notikumiem, piemēram, klikšķiem, tas var padarīt šo visu sarežģītāku.

Loģika…

Par laimi, ir vairākas pieejas loģikas rakstīšanai, lai nodrošinātu, ka šis process norit nevainojami un prasa mazāk darba. Ar šī raksta palīdzību, Jūs varēsiet gūt izpratni par nosacījumu renderēšanu un zināsiet, kā to iestatīt, izmantojot trīskāršus operatorus.

Atsauciet sev atmiņā, ka “steits” ir komponenta iekšējie dati, kurus šis komponents var kontrolēt vai mainīt pretstatā rekvizītiem, kurus komponents saņem, bet nevar mainīt.

Lietojumprogrammā komponentus var renderēt nosacīti, pamatojoties uz to, vai konkrēta stāvokļa datiem ir noteiktas vērtības. Citiem vārdiem sakot, rakstot renderēšanas loģiku galvenajā lietotnes komponentā, jums būs jāatsaucas uz pārējo komponentu stāvokli.

Piemēram, pieņemsim, ka jums ir komponents, kurā ir kods pogai, kas parāda sānjoslu “Sidebar”, poga kontrolē pārslēgšanas sānjoslas mainīgā stāvokli, kas noklusējumā ir iestatīts uz “false“.

Noklikšķinot uz pogas, pārslēgšanas sānjoslas “Sidebar” mainīgā statuss tiek atjaunināts uz “true” un tiek parādīts sānjoslas komponents.

Lai tas būtu iespējams, React darbojas ar nosacījumu jēdzieniem un sintaksi, kas jau ir pieejamas JavaScript. Piemēram, atcerieties JavaScript priekšrakstu ar nosacījumu, ka izstrādātāji to izmanto, lai palaistu kodu nosacīti atkarībā no tā, vai kaut kas ir patiess vai nepatiess.

var result = 50;

if (result > 40) {

console.log("Apsveicam Jūs esat nokārtojis eksāmenu!");

} else {

console.log("Diemžēl Jūs nenokārtojāt eksāmenu.");

}

Ilustrējošs piemērs…

Lai ilustrētu nosacījumu renderēšanu darbībā, vispirms apskatīsim produktivitātes lietotnes piemēru.

Pamatojoties uz ierīces datiem piekļuves brīdī, lietotne parāda vienu no diviem ziņojumiem.

• Darba dienās ziņa ir: Padariet to!
• Nedēļas nogalēs tas parāda: Atpūtieties.

Kā izstrādātājam ir daži veidi, kā sasniegt šo funkcionalitāti. Bet šajā rakstā jūs koncentrēsities uz trīskāršā operatora izmantošanu, lai rakstītu vienkāršotus “if / else” nosacījumus.

Lai to panāktu sāciet, izveidojot komponentu ar nosaukumu “CurrentMessage”. Šis komponents izmanto JavaScript iebūvēto datuma funkciju, kā arī metodi get day, lai saglabātu nedēļas dienu kā skaitli, kur nulle apzīmē svētdienu un seši – nākamo sestdienu.

function CurrentMessage() {

const day = new Date().getDay();

}

• Svētdiena: 0
• Pirmdiena: 1
• Otrdiena: 2
• Trešdiena: 3
• Ceturtdiena: 4
• Piektdiena: 5
• Sestdiena: 6

Pēc tam izveidojiet divus komponentus, kuros katrā ir viens no parādāmajiem ziņojumiem. Nosauksim šos komponentus par “WorkDays” un “WeekEnds”. Pašreizējam ziņojuma komponentam ir jāatveido atbilstošie komponenti, pamatojoties uz vērtību, kas tiek atgriezta no funkcijas “getDay” izsaukuma. Izveidosim un papildināsim nosacījumus, lai tas notiktu.

function CurrentMessage() { const day = new Date().getDay(); return day >= 1 && day <= 5 ? <WorkDays /> : <WeekEnds />; }

Atcerieties, ka trīskāršais operators ņem trīs komandas. Pirmais ir nosacījums, kas šajā piemērā izmanto loģisko un operatoru “{day >= 1 && day <=5”. Nosacījums pārbauda, vai dienas mainīgajā saglabātā vērtība ir lielāka vai vienāda ar vienu un mazāka vai vienāda ar pieci. Pēc tam jautājuma zīmes simbols, kam seko izteiksme “? <WorkDays />” , kas jāizpilda, ja nosacījums tiek novērtēts kā patiess. Šajā piemērā tiek renderēts komponents “WorkDays”. Nākamais ir kola simbols, kas apzīmē kodu, kas jāizpilda, ja nosacījums tiek novērtēts kā nepatiess “: <WeekEnds />”. Un, ja tas notiek, komponentu nedēļas nogales tiek renderētas. Loģiskā un operatora izmantošana nosacījumā nozīmē, ka abām izteiksmēm ir jāatgriež “true” boolean vērtība, lai atveidotu komponentu “WorkDays”. Pretējā gadījumā tiks renderēts nedēļas “WeekEnds” komponents.

Trīskāršā operatora izmantošana ir izplatīta shēma, ko var redzēt React kodā.  Ja esat React iesācējs, tad var būt grūtības pilnībā izprast šī koda logiku pilnībā. Tātad, atsauksimies uz vienkāršāku versiju, kurā tiek izmantotas Būlean vērtības.

function VaiJauIrVasara() { const vasara = true; return vasara ? <h1>Dodamies uz pludmali</h1> : <h1>Skatīsimies televizoru</h1>; }

Šajā piemēra komponentā VaiJauIrVasara mainīgajam vasara ir iestatīta vērtība true. Trīskāršais operators atgriežas pie izteiksmes pēc jautājuma zīmes, ja nosacījums pirms jautājuma zīmes ir patiess. Pretējā gadījumā tas atgriež izteiksmi pēc kola simbola. Tātad, tā kā mainīgais vasara tiek novērtēts kā patiess, šī komponenta renderēšana atgriezīs virkni, Dosimies uz pludmali. Šajā rakstā jūs uzzinājāt par nosacījumu renderēšanu un to, kā to ieviest dinamiskās lietotnēs, izmantojot trīskāršus operatorus.

Plašāk un skaidrojošāk ar piemēriem jau nākošajos rakstos…