Lisage oma React.js rakendusse hüpikaknaefektid

Hüpikaknad on suurepärane viis kasutaja tähelepanu püüdmiseks ja olulise teabe kuvamiseks. Saate neid kasutada näiteks kinnitus- ja veateadete saatmiseks. Või saate neid lihtsalt kasutada lehe elemendi kohta lisateabe kuvamiseks.

Reactis on hüpikakende loomiseks kaks võimalust: Reacti konksude või välise mooduli kasutamine.

Kuidas luua hüpikaknaid rakenduses React.js

Esiteks looge lihtne reageerimisrakendus. Pärast seda saate hüpikakna lisada, kasutades ühte kahest meetodist. Võite kasutada Reacti konkse või välist moodulit.

1. React Hookide kasutamine

Konksude lähenemine on lihtsam ja nõuab vaid mõnda koodirida.

Esiteks peate looma funktsiooni, mis avab hüpikakna. Selle funktsiooni saate määrata komponendis, mis kuvab hüpikakna.

Järgmiseks peate hüpikakna jaoks olekumuutuja loomiseks kasutama konksu useState. Selle olekumuutuja abil saate määrata, kas hüpikaken peaks olema avatud või mitte.

Lõpuks peate oma komponendile lisama nupu, mis käivitab hüpikakna. Kui klõpsate sellel nupul, määrake olekumuutuja väärtuseks Tõene, mis põhjustab hüpikakna kuvamise.

Vaadake selle lähenemisviisi koodi:

importida Reageerige, { useState } alates 'reageerida';
funktsiooniNäide() {
konst [isOpen, setIsOpen] = useState(vale);
tagasi (
<div>
<nupp onClick={() => setIsOpen (tõene)}>
 Avage hüpikaken
</button>
{on avatud && (
<div>
<div>
 See on hüpikakna sisu.
</div>
<nupp onClick={() => setIsOpen (vale)}>
 Sule hüpikaken
</button>
</div>
 )}
</div>
 );
}
eksportidavaikimisi Näide;

Esiteks impordib see kood põhireaktsiooni teegist useState konksu. Seejärel kasutab funktsioon Näide konksu useState, et luua olekumuutuja nimega isOpen. See olekumuutuja määrab, kas hüpikaken peab olema avatud või mitte.

Järgmisena lisage hüpikakna käivitavale komponendile nupp. Kui klõpsate sellel nupul, määratakse olekumuutuja väärtuseks Tõene, mis põhjustab hüpikakna kuvamise.

Lõpuks lisage komponendile nupp, mis hüpikakna sulgeb. Kui klõpsate sellel nupul, määratakse olekumuutuja väärtuseks Väär, mistõttu hüpikaken kaob.

2. Välise mooduli kasutamine

Hüpikaknaid saate luua ka Reactis välise mooduli abil. Saadaval on palju mooduleid, mida saate selleks kasutada.

Üks populaarne moodul on react-modaalne. react-modal on lihtne ja kerge moodul, mis võimaldab teil luua Reactis modaalseid dialooge.

React-modaali kasutamiseks peate selle esmalt installima npm abil:

npm installida reageerida-modaalne

Kui olete react-modali installinud, saate selle importida oma Reacti komponenti.

importida ReactModal alates 'reageerida-modaalne';
importida Reageerige, { useState } alates 'reageerida';
funktsiooniNäide() {
konst [isOpen, setIsOpen] = useState(vale);
tagasi (
<div>
<nupp onClick={setIsOpen}>Avage Modal</button>
<ReactModal
 isOpen={isOpen}
 contentLabel="Näide Modal"
>
 See on modaali sisu.
</ReactModal>
</div>
 );
}
eksportidavaikimisi Näide;

Selles koodis kasutate endiselt Reacti konkse, kuid react-modaalse mooduliga. React-modal mooduliga saate hüpikaknale rohkem funktsioone lisada. Nagu näete, on kood eelmise lähenemisviisiga väga sarnane. Ainus erinevus on see, et kasutate nüüd komponenti ReactModal react-modal, selle asemel, et luua oma.

Esiteks peate importima react-modaali mooduli. Seejärel kasutate hüpikakna sisu pakkimiseks komponenti ReactModal. Kasutage isOpen propi, et määrata, kas modaal peaks olema avatud või mitte.

Kui olete hüpikakna loonud, võite soovida sellele lisada täiendavaid funktsioone. Näiteks võite hüpikakna sulgeda, kui kasutaja klõpsab sellest väljaspool.

Selleks peate kasutama react-modaalse komponendi propi onRequestClose. Selle rekvisiidi väärtuseks on funktsioon. See funktsioon käivitub, kui kasutaja klõpsab väljaspool modaali.

Näiteks hüpikakna sulgemiseks, kui kasutaja klõpsab sellest väljaspool, kasutage järgmist koodi:

importida Reageerige, { useState } alates 'reageerida';
importida ReactModal alates 'reageerida-modaalne';
funktsiooniNäide() {
konst [isOpen, setIsOpen] = useState(vale);
tagasi (
<div>
<nupp onClick={() => setIsOpen (tõene)}>
 Avage Modal
</button>
<ReactModal
 isOpen={isOpen}
 contentLabel="Näide Modal"
 onRequestClose={() => setIsOpen(vale)}
>
 See on modaali sisu.
</ReactModal>
</div>
 );
}
eksportidavaikimisi Näide;

Funktsioon, mille me edastame rekvisiidile onRequestClose, määrab lihtsalt isOpen olekumuutuja väärtuseks false. See põhjustab modaali sulgemise.

Saate lisada ReactModali komponendile ka muid rekvisiite, et seda veelgi kohandada. Rekvisiitide täieliku loendi leiate react-modal dokumentatsioonist.

Stiili lisamine hüpikakendesse

Kui olete hüpikakna loonud, võiksite sellele lisada stiili. Reacti komponentide stiilimiseks on palju viise, kuid keskendume tekstisisesetele stiilidele.

Tekstisisesed stiilid on stiilid, mille saate lisada otse Reacti komponendile. Tekstisiseste stiilide lisamiseks peate kasutama stiili atribuuti. See omadus võtab oma väärtuseks objekti, kus võtmed on stiili atribuudid ja väärtused stiili väärtused.

Näiteks valge taustavärvi ja 500 piksli laiuse lisamiseks hüpikaknale kasutage järgmist koodi:

importida Reageerige alates 'reageerida';
funktsiooniNäide() {
tagasi (
<div style={{ taustavärv: 'valge', laius: '500 pikslit' }}>
 See on hüpikakna sisu.
</div>
 );
}
eksportidavaikimisi Näide;

Selles koodis lisate div elemendile atribuudi style atribuudid backgroundColor ja laius. Sa saad ka kasutage Reacti rakenduses Tailwind CSS-i hüpikakende stiili kujundamiseks.

Suurendage hüpikakende abil konversioonimäära

Hüpikaknad võivad aidata suurendada konversioonimäärasid, kuvades kasutajale olulist teavet. Näiteks saate hüpikakna abil kuvada sooduskoodi või eripakkumise. Saate kasutada ka hüpikakent, et koguda oma uudiskirja e-posti aadresse. Hüpikakna lisamine oma Reacti rakendusse on suurepärane viis konversioonimäärade suurendamiseks.

Samuti saate oma Reacti rakenduse hõlpsasti GitHubi lehtedel tasuta juurutada.