Uznirstošie logi ir lielisks veids, kā piesaistīt lietotāja uzmanību un parādīt svarīgu informāciju. Varat tos izmantot, piemēram, apstiprinājuma ziņojumiem un kļūdu ziņojumiem. Vai arī varat tos vienkārši izmantot, lai parādītu papildu informāciju par lapas elementu.
Programmā React ir divi veidi, kā izveidot uznirstošos logus: izmantojot React āķus vai ārēju moduli.
Kā izveidot uznirstošos logus pakalpojumā React.js
Pirmkārt, izveidojiet vienkāršu reaģēšanas lietotni. Pēc tam varat pievienot uznirstošo logu, izmantojot vienu no divām metodēm. Varat izmantot React āķus vai ārēju moduli.
1. Izmantojot React Hooks
Āķu pieeja ir vienkāršāka un prasa tikai dažas koda rindiņas.
Pirmkārt, jums ir jāizveido funkcija, kas atvērs uznirstošo logu. Šo funkciju varat definēt komponentā, kas parādīs uznirstošo logu.
Pēc tam ir jāizmanto āķis useState, lai izveidotu uznirstošā loga stāvokļa mainīgo. Varat izmantot šo stāvokļa mainīgo, lai noteiktu, vai uznirstošajam logam ir jābūt atvērtam vai nē.
Visbeidzot, komponentam jāpievieno poga, kas aktivizēs uznirstošo logu. Noklikšķinot uz šīs pogas, iestatiet stāvokļa mainīgo vērtību uz True, kas parādīs uznirstošo logu.
Apskatiet šīs pieejas kodu:
imports Reaģēt, { useState } no "reaģēt";funkcijuPiemērs() {
konst [isOpen, setIsOpen] = useState(viltus);atgriezties (
<div>
<poga onClick={() => setIsOpen (true)}>
Atveriet uznirstošo logu
</button>{isOpen && (
<div>
<div>
Šis ir uznirstošā loga saturu.
</div>
<poga onClick={() => setIsOpen (false)}>
Aizvērt uznirstošo logu
</button>
</div>
)}
</div>
);
}
eksportētnoklusējuma Piemērs;
Pirmkārt, šis kods importē useState āķi no galvenās reakcijas bibliotēkas. Pēc tam funkcija Piemērs izmanto āķi useState, lai izveidotu stāvokļa mainīgo ar nosaukumu isOpen. Šis stāvokļa mainīgais nosaka, vai uznirstošajam logam jābūt atvērtam vai nē.
Pēc tam pievienojiet pogu komponentam, kas aktivizēs uznirstošo logu. Noklikšķinot uz šīs pogas, stāvokļa mainīgais tiks iestatīts uz True, kā rezultātā parādīsies uznirstošais logs.
Visbeidzot komponentam pievienojiet pogu, kas aizvērs uznirstošo logu. Noklikšķinot uz šīs pogas, stāvokļa mainīgais tiks iestatīts uz nepatiesu, kā rezultātā uznirstošais logs pazudīs.
2. Izmantojot ārējo moduli
Varat arī izveidot uznirstošos logus programmā React, izmantojot ārēju moduli. Ir pieejami daudzi moduļi, kurus varat izmantot šim nolūkam.
Viens populārs modulis ir react-modal. react-modal ir vienkāršs un viegls modulis, kas ļauj izveidot modālus dialogus programmā React.
Lai izmantotu react-modal, vispirms tas jāinstalē, izmantojot npm:
npm uzstādīt reaģēt-modālsKad esat instalējis react-modal, varat to importēt savā React komponentā:
imports ReactModal no “reaģēt-modāls”;
imports Reaģēt, { useState } no "reaģēt";funkcijuPiemērs() {
konst [isOpen, setIsOpen] = useState(viltus);atgriezties (
<div>
<poga onClick={setIsOpen}>Atveriet Modal</button>
<ReactModal
isOpen={isOpen}
contentLabel="Piemērs Modāls"
>
Šis ir modāla saturs.
</ReactModal>
</div>
);
}
eksportētnoklusējuma Piemērs;
Šajā kodā jūs joprojām izmantojat React āķus, bet ar react-modal moduli. Izmantojot react-modal moduli, uznirstošajam logam varat pievienot vairāk funkcionalitātes. Kā redzat, kods ir ļoti līdzīgs iepriekšējai pieejai. Vienīgā atšķirība ir tā, ka jūs tagad izmantojat ReactModal komponentu no react-modal, nevis veidojat savu.
Pirmkārt, jums ir jāimportē react-modal modulis. Pēc tam izmantojiet ReactModal komponentu, lai ietītu uznirstošā loga saturu. Izmantojiet isOpen balstu, lai noteiktu, vai modālam ir jābūt atvērtam vai nē.
Kad esat izveidojis uznirstošo logu, iespējams, vēlēsities tam pievienot papildu funkcijas. Piemēram, iespējams, vēlēsities aizvērt uznirstošo logu, kad lietotājs noklikšķina ārpus tā.
Lai to izdarītu, jums ir jāizmanto react-modal komponenta rekvizīts onRequestClose. Šī rekvizīta vērtība ir funkcija. Šī funkcija darbosies, kad lietotājs noklikšķinās ārpus modāla.
Piemēram, lai aizvērtu uznirstošo logu, kad lietotājs noklikšķina ārpus tā, izmantojiet šādu kodu:
imports Reaģēt, { useState } no "reaģēt";
imports ReactModal no “reaģēt-modāls”;funkcijuPiemērs() {
konst [isOpen, setIsOpen] = useState(viltus);atgriezties (
<div>
<poga onClick={() => setIsOpen (true)}>
Atveriet Modal
</button>
<ReactModal
isOpen={isOpen}
contentLabel="Piemērs Modāls"
onRequestClose={() => setIsOpen(viltus)}
>
Šis ir modāla saturs.
</ReactModal>
</div>
);
}
eksportētnoklusējuma Piemērs;
Funkcija, ko nododam rekvizītam onRequestClose, vienkārši iestata isOpen stāvokļa mainīgo uz false. Tādējādi modāls tiks aizvērts.
ReactModal komponentam varat pievienot arī citus rekvizītus, lai to vēl vairāk pielāgotu. Lai iegūtu pilnu rekvizītu sarakstu, varat iepazīties ar react-modal dokumentāciju.
Stila pievienošana uznirstošajos logos
Kad esat izveidojis savu uznirstošo logu, iespējams, vēlēsities tam pievienot stilu. Ir daudzi veidi, kā veidot React komponentus, taču mēs koncentrēsimies uz iekļautajiem stiliem.
Iekļautie stili ir stili, kurus varat pievienot tieši React komponentam. Lai pievienotu iekļautos stilus, ir jāizmanto stila rekvizīts. Šis rekvizīts izmanto objektu kā savu vērtību, kur atslēgas ir stila īpašības un vērtības ir stila vērtības.
Piemēram, lai uznirstošajam logam pievienotu baltu fona krāsu un 500 pikseļu platumu, izmantojiet šādu kodu:
imports Reaģēt no "reaģēt";funkcijuPiemērs() {
atgriezties (
<div style={{ fona krāsa: 'balts', platums: '500 pikseļi' }}>
Šis ir uznirstošā loga saturu.
</div>
);
}
eksportētnoklusējuma Piemērs;
Šajā kodā jūs pievienojat stila rekvizītu div elementam ar rekvizītiem backgroundColor un platums. Jūs varat arī izmantojiet React lietotnē Tailwind CSS lai pielāgotu uznirstošos logus.
Palieliniet reklāmguvumu līmeni, izmantojot uznirstošos logus
Uznirstošie logi var palīdzēt palielināt reklāmguvumu līmeni, parādot lietotājam svarīgu informāciju. Piemēram, varat izmantot uznirstošo logu, lai parādītu atlaides kodu vai īpašo piedāvājumu. Varat arī izmantot uznirstošo logu, lai apkopotu e-pasta adreses savam informatīvajam izdevumam. Uznirstošā loga pievienošana savai React lietotnei ir lielisks veids, kā palielināt reklāmguvumu līmeni.
Varat arī viegli bez maksas izvietot savu React lietojumprogrammu GitHub lapās.