Kontextové okná sú skvelým spôsobom, ako upútať pozornosť používateľa a zobraziť dôležité informácie. Môžete ich použiť na veci, ako sú potvrdzovacie správy a chybové správy. Alebo ich môžete použiť len na zobrazenie dodatočných informácií o prvku na stránke.
V Reacte existujú dva spôsoby, ako vytvoriť kontextové okná: pomocou háčikov React alebo pomocou externého modulu.
Ako vytvoriť kontextové okná v React.js
Najprv, vytvorte jednoduchú aplikáciu na reakcie. Potom môžete pridať kontextové okno pomocou jednej z dvoch metód. Môžete použiť háky React alebo externý modul.
1. Použitie React Hooks
Prístup hákov je jednoduchší a vyžaduje len niekoľko riadkov kódu.
Najprv musíte vytvoriť funkciu, ktorá otvorí kontextové okno. Túto funkciu môžete definovať v komponente, ktorý zobrazí kontextové okno.
Ďalej musíte použiť háčik useState na vytvorenie premennej stavu pre kontextové okno. Túto stavovú premennú môžete použiť na určenie, či má byť kontextové okno otvorené alebo nie.
Nakoniec musíte do svojho komponentu pridať tlačidlo, ktoré spustí vyskakovacie okno. Keď kliknete na toto tlačidlo, nastavte stavovú premennú na hodnotu true, čo spôsobí zobrazenie kontextového okna.
Pozrite sa na kód pre tento prístup:
importovať Reagovať, { useState } od 'reagovať';funkciuPríklad() {
konšt [isOpen, setIsOpen] = useState(falošný);vrátiť (
<div>
<button onClick={() => setIsOpen (true)}>
Otvorte kontextové okno
</button>{je otvorené && (
<div>
<div>
Toto je obsah vyskakovacieho okna.
</div>
<button onClick={() => setIsOpen (false)}>
Zavrieť kontextové okno
</button>
</div>
)}
</div>
);
}
exportpredvolená Príklad;
Najprv tento kód importuje háčik useState z hlavnej knižnice reakcií. Potom funkcia Príklad použije háčik useState na vytvorenie stavovej premennej s názvom isOpen. Táto premenná stavu určuje, či má byť kontextové okno otvorené alebo nie.
Potom do komponentu pridajte tlačidlo, ktoré spustí kontextové okno. Keď kliknete na toto tlačidlo, stavová premenná sa nastaví na hodnotu true, čo spôsobí zobrazenie kontextového okna.
Nakoniec pridajte do komponentu tlačidlo, ktoré zatvorí vyskakovacie okno. Keď kliknete na toto tlačidlo, stavová premenná bude nastavená na false, čo spôsobí, že vyskakovacie okno zmizne.
2. Použitie externého modulu
Môžete tiež vytvárať kontextové okná v React pomocou externého modulu. K dispozícii je veľa modulov, ktoré môžete na tento účel použiť.
Jedným z populárnych modulov je reakčný modálny. React-modal je jednoduchý a ľahký modul, ktorý vám umožňuje vytvárať modálne dialógy v Reacte.
Ak chcete použiť response-modal, musíte ho najprv nainštalovať pomocou npm:
npm Inštalácia reagovať-modálnePo nainštalovaní React-modal ho môžete importovať do svojho komponentu React:
importovať ReactModal od „react-modal“;
importovať Reagovať, { useState } od 'reagovať';funkciuPríklad() {
konšt [isOpen, setIsOpen] = useState(falošný);vrátiť (
<div>
<button onClick={setIsOpen}>Otvorte modal</button>
<ReactModal
isOpen={isOpen}
contentLabel="Príklad Modal"
>
Toto je obsah modálu.
</ReactModal>
</div>
);
}
exportpredvolená Príklad;
V tomto kóde stále používate háky React, ale s modulom React-modal. Pomocou modulu Reagovať môžete do kontextového okna pridať ďalšie funkcie. Ako vidíte, kód je veľmi podobný predchádzajúcemu prístupu. Jediný rozdiel je v tom, že teraz používate komponent ReactModal z React-modal namiesto vytvárania vlastného.
Najprv musíte importovať modul reakcie. Potom použijete komponent ReactModal na zabalenie obsahu vyskakovacieho okna. Použite podperu isOpen na určenie, či má byť modal otvorený alebo nie.
Po vytvorení kontextového okna môžete doň pridať ďalšie funkcie. Môžete napríklad chcieť zatvoriť kontextové okno, keď používateľ klikne mimo neho.
Ak to chcete urobiť, musíte použiť prop onRequestClose komponentu reagovať. Táto podpera berie funkciu ako svoju hodnotu. Táto funkcia sa spustí, keď používateľ klikne mimo modálu.
Ak chcete napríklad zatvoriť kontextové okno, keď používateľ klikne mimo neho, použite nasledujúci kód:
importovať Reagovať, { useState } od 'reagovať';
importovať ReactModal od „react-modal“;funkciuPríklad() {
konšt [isOpen, setIsOpen] = useState(falošný);vrátiť (
<div>
<button onClick={() => setIsOpen (true)}>
Otvorte modal
</button>
<ReactModal
isOpen={isOpen}
contentLabel="Príklad Modal"
onRequestClose={() => setIsOpen(falošný)}
>
Toto je obsah modálu.
</ReactModal>
</div>
);
}
exportpredvolená Príklad;
Funkcia, ktorú odovzdávame prop onRequestClose, jednoducho nastaví premennú stavu isOpen na hodnotu false. To spôsobí zatvorenie modálu.
Ku komponentu ReactModal môžete pridať aj ďalšie rekvizity, aby ste si ho mohli ďalej prispôsobiť. Úplný zoznam rekvizít si môžete pozrieť v dokumentácii k reakcii.
Pridanie štýlu do kontextových okien
Po vytvorení vyskakovacieho okna doň možno budete chcieť pridať nejaký štýl. Existuje mnoho spôsobov, ako upraviť komponenty Reactu, ale my sa zameriame na inline štýly.
Vložené štýly sú štýly, ktoré môžete pridať priamo do komponentu React. Ak chcete pridať vložené štýly, musíte použiť vlastnosť štýlu. Táto vlastnosť berie objekt ako svoju hodnotu, kde kľúče sú vlastnosti štýlu a hodnoty sú hodnoty štýlu.
Napríklad, ak chcete do kontextového okna pridať bielu farbu pozadia a šírku 500 pixelov, použite nasledujúci kód:
importovať Reagovať od 'reagovať';funkciuPríklad() {
vrátiť (
<div style={{ backgroundColor: 'biely', šírka: '500 pixelov' }}>
Toto je obsah vyskakovacieho okna.
</div>
);
}
exportpredvolená Príklad;
V tomto kóde pridáte vlastnosť style do prvku div s vlastnosťami backgroundColor a width. Môžete tiež použite Tailwind CSS v aplikácii Reagovať na úpravu vyskakovacích okien.
Zvýšte mieru konverzie pomocou kontextových okien
Vyskakovacie okná môžu pomôcť zvýšiť mieru konverzie zobrazením dôležitých informácií pre používateľa. Môžete napríklad použiť vyskakovacie okno na zobrazenie zľavového kódu alebo špeciálnej ponuky. Môžete tiež použiť kontextové okno na zhromažďovanie e-mailových adries pre váš bulletin. Pridanie kontextového okna do vašej aplikácie React je skvelý spôsob, ako zvýšiť mieru konverzie.
Svoju aplikáciu React môžete tiež jednoducho bezplatne nasadiť na stránky GitHub.