Dodajte pojavne učinke svoji aplikaciji React.js

Pojavna okna so odličen način, da pritegnete uporabnikovo pozornost in prikažete pomembne informacije. Uporabite jih lahko za stvari, kot so potrditvena sporočila in sporočila o napakah. Lahko pa jih preprosto uporabite za prikaz dodatnih informacij o elementu na strani.

V Reactu obstajata dva načina za ustvarjanje pojavnih oken: z uporabo kavljev React ali z uporabo zunanjega modula.

Kako ustvariti pojavna okna v React.js

Prvič, ustvarite preprosto aplikacijo React. Po tem lahko dodate pojavno okno na enega od dveh načinov. Uporabite lahko kljuke React ali zunanji modul.

1. Uporaba React Hooks

Pristop s kavlji je enostavnejši in zahteva le nekaj vrstic kode.

Najprej morate ustvariti funkcijo, ki bo odprla pojavno okno. To funkcijo lahko definirate v komponenti, ki bo prikazala pojavno okno.

Nato morate uporabiti kljuko useState, da ustvarite spremenljivko stanja za pojavno okno. S to spremenljivko stanja lahko določite, ali naj bo pojavno okno odprto ali ne.

Končno morate svoji komponenti dodati gumb, ki bo sprožil pojavno okno. Ko kliknete ta gumb, nastavite spremenljivko stanja na true, kar bo povzročilo prikaz pojavnega okna.

Oglejte si kodo za ta pristop:

uvoz Odziv, {useState} od 'reagirati';
funkcijoPrimer() {
konst [isOpen, setIsOpen] = useState(lažno);
vrnitev (
<div>
<gumb onClick={() => setIsOpen (true)}>
 Odpri pojavno okno
</button>
{isOpen && (
<div>
<div>
 to je vsebino pojavnega okna.
</div>
<gumb onClick={() => setIOpen (false)}>
 Zapri pojavno okno
</button>
</div>
 )}
</div>
 );
}
izvozprivzeto primer;

Najprej ta koda uvozi kljuko useState iz knjižnice jedrnega odziva. Nato funkcija Primer uporabi kljuko useState za ustvarjanje spremenljivke stanja, imenovane isOpen. Ta spremenljivka stanja določa, ali naj bo pojavno okno odprto ali ne.

Nato komponenti dodajte gumb, ki bo sprožil pojavno okno. Ko kliknete ta gumb, bo spremenljivka stanja nastavljena na true, kar bo povzročilo pojav pojavnega okna.

Nazadnje komponenti dodajte gumb, ki bo zaprl pojavno okno. Ko kliknete ta gumb, bo spremenljivka stanja nastavljena na false, zaradi česar bo pojavno okno izginilo.

2. Uporaba zunanjega modula

V Reactu lahko ustvarite tudi pojavna okna z uporabo zunanjega modula. Na voljo je veliko modulov, ki jih lahko uporabite v ta namen.

Eden priljubljenih modulov je react-modal. react-modal je preprost in lahek modul, ki vam omogoča ustvarjanje modalnih pogovornih oken v Reactu.

Če želite uporabljati react-modal, ga morate najprej namestiti z uporabo npm:

npm namestite react-modal

Ko namestite react-modal, ga lahko uvozite v svojo komponento React:

uvoz ReactModal od 'react-modal';
uvoz Odziv, {useState} od 'reagirati';
funkcijoPrimer() {
konst [isOpen, setIsOpen] = useState(lažno);
vrnitev (
<div>
<gumb onClick={setIsOpen}>Odprite Modal</button>
<ReactModal
 isOpen={je odprto}
 contentLabel="Primer Modal"
>
 to je vsebino modala.
</ReactModal>
</div>
 );
}
izvozprivzeto primer;

V tej kodi še vedno uporabljate kljuke React, vendar z modulom react-modal. Z modulom react-modal lahko pojavnemu oknu dodate več funkcionalnosti. Kot lahko vidite, je koda zelo podobna prejšnjemu pristopu. Edina razlika je v tem, da zdaj uporabljate komponento ReactModal iz react-modal namesto ustvarjanja lastne.

Najprej morate uvoziti modul react-modal. Nato uporabite komponento ReactModal, da zavijete vsebino vašega pojavnega okna. Uporabite podlago isOpen, da določite, ali naj bo modal odprt ali ne.

Ko ustvarite pojavno okno, mu boste morda želeli dodati dodatne funkcije. Na primer, morda boste želeli zapreti pojavno okno, ko uporabnik klikne zunaj njega.

Če želite to narediti, morate uporabiti prop onRequestClose react-modal komponente. Ta rekvizit ima funkcijo kot svojo vrednost. Ta funkcija se bo zagnala, ko uporabnik klikne zunaj modala.

Če želite na primer zapreti pojavno okno, ko uporabnik klikne zunaj njega, bi uporabili naslednjo kodo:

uvoz Odziv, {useState} od 'reagirati';
uvoz ReactModal od 'react-modal';
funkcijoPrimer() {
konst [isOpen, setIsOpen] = useState(lažno);
vrnitev (
<div>
<gumb onClick={() => setIsOpen (true)}>
 Odprite Modal
</button>
<ReactModal
 isOpen={je odprto}
 contentLabel="Primer Modal"
 onRequestClose={() => setIsOpen(lažno)}
>
 to je vsebino modala.
</ReactModal>
</div>
 );
}
izvozprivzeto primer;

Funkcija, ki jo posredujemo propu onRequestClose, preprosto nastavi spremenljivko stanja isOpen na false. To bo povzročilo zaprtje modala.

Komponenti ReactModal lahko dodate tudi druge pripomočke, da jo dodatno prilagodite. Za celoten seznam rekvizitov si lahko ogledate dokumentacijo react-modal.

Dodajanje sloga v pojavna okna

Ko ustvarite pojavno okno, mu boste morda želeli dodati nekaj sloga. Obstaja veliko načinov za oblikovanje komponent React, vendar se bomo osredotočili na vgrajene sloge.

Vgrajeni slogi so slogi, ki jih lahko dodate neposredno komponenti React. Če želite dodati sloge v vrstici, morate uporabiti lastnost style. Ta lastnost sprejme predmet kot svojo vrednost, kjer so ključi lastnosti sloga, vrednosti pa vrednosti sloga.

Na primer, če želite pojavnemu oknu dodati belo barvo ozadja in širino 500 slikovnih pik, uporabite naslednjo kodo:

uvoz Reagiraj od 'reagirati';
funkcijoPrimer() {
vrnitev (
<div style={{backgroundColor: 'bela', premer: '500 slikovnih pik' }}>
 to je vsebino pojavnega okna.
</div>
 );
}
izvozprivzeto primer;

V tej kodi dodate lastnost style elementu div z lastnostma BackColor in width. Lahko tudi uporabite Tailwind CSS v aplikaciji React za oblikovanje pojavnih oken.

Povečajte stopnjo konverzije s pojavnimi okni

Pojavna okna lahko pomagajo povečati stopnjo konverzije, tako da uporabniku prikažejo pomembne informacije. Uporabite lahko na primer pojavno okno za prikaz kode za popust ali posebne ponudbe. Uporabite lahko tudi pojavno okno za zbiranje e-poštnih naslovov za vaše glasilo. Dodajanje pojavnega okna vaši aplikaciji React je odličen način za povečanje stopnje konverzije.

Na straneh GitHub lahko tudi preprosto brezplačno namestite svojo aplikacijo React.