Ponnahdusikkunat ovat loistava tapa kiinnittää käyttäjän huomio ja näyttää tärkeitä tietoja. Voit käyttää niitä esimerkiksi vahvistusviesteihin ja virheilmoituksiin. Tai voit käyttää niitä vain näyttämään lisätietoa sivun elementistä.

Reactissa on kaksi tapaa luoda ponnahdusikkunoita: käyttämällä React-koukkuja tai käyttämällä ulkoista moduulia.

Ponnahdusikkunoiden luominen React.js: ssa

Ensimmäinen, Luo yksinkertainen reagointisovellus. Tämän jälkeen voit lisätä ponnahdusikkunan jommallakummalla kahdesta menetelmästä. Voit käyttää React-koukkuja tai ulkoista moduulia.

1. React Hooks -koukkujen käyttö

Koukut-lähestymistapa on yksinkertaisempi ja vaatii vain muutaman rivin koodia.

Ensin sinun on luotava toiminto, joka avaa ponnahdusikkunan. Voit määrittää tämän toiminnon komponentissa, joka näyttää ponnahdusikkunan.

Seuraavaksi sinun on käytettävä useState-koukkua tilamuuttujan luomiseen ponnahdusikkunalle. Tämän tilamuuttujan avulla voit määrittää, pitäisikö ponnahdusikkuna olla auki vai ei.

Lopuksi sinun on lisättävä komponenttiin painike, joka käynnistää ponnahdusikkunan. Kun napsautat tätä painiketta, aseta tilamuuttujaksi tosi, jolloin ponnahdusikkuna tulee näkyviin.

instagram viewer

Katso tämän lähestymistavan koodia:

tuonti Reagoi, { useState } alkaen "reagoi";
toimintoEsimerkki() {
konst [isOpen, setIsOpen] = useState(väärä);


palata (
<div>
<painike onClick={() => setIsOpen (tosi)}>
 Avaa ponnahdusikkuna
</button>


{onOpen && (
<div>
<div>
 Tämä On ponnahdusikkunan sisältö.
</div>
<painike onClick={() => setIsOpen (false)}>
 Sulje ponnahdusikkuna
</button>
</div>
 )}
</div>
 );
}
viedäoletuksena Esimerkki;

Ensinnäkin tämä koodi tuo useState-koukun ydinreaktiokirjastosta. Sitten Esimerkki-funktio luo useState-koukun avulla tilamuuttujan nimeltä isOpen. Tämä tilamuuttuja määrittää, onko ponnahdusikkunan oltava auki vai ei.

Lisää seuraavaksi painike komponenttiin, joka käynnistää ponnahdusikkunan. Kun napsautat tätä painiketta, tilamuuttujan arvoksi tulee tosi, jolloin ponnahdusikkuna tulee näkyviin.

Lisää lopuksi komponenttiin painike, joka sulkee ponnahdusikkunan. Kun napsautat tätä painiketta, tilamuuttujan arvoksi tulee epätosi, jolloin ponnahdusikkuna katoaa.

2. Ulkoisen moduulin käyttäminen

Voit myös luoda ponnahdusikkunoita Reactissa käyttämällä ulkoista moduulia. Saatavilla on monia moduuleja, joita voit käyttää tähän tarkoitukseen.

Yksi suosittu moduuli on react-modaalinen. react-modal on yksinkertainen ja kevyt moduuli, jonka avulla voit luoda modaalidialogeja Reactissa.

Jos haluat käyttää react-modaalia, sinun on ensin asennettava se npm: llä:

npm Asentaa reagoida-modaalinen

Kun olet asentanut react-modalin, voit tuoda sen React-komponenttiin:

tuonti ReactModal alkaen 'react-modaalinen';
tuonti Reagoi, { useState } alkaen "reagoi";
toimintoEsimerkki() {
konst [isOpen, setIsOpen] = useState(väärä);


palata (
<div>
<button onClick={setIsOpen}>Avaa Modal</button>
<ReactModal
 isOpen={isOpen}
 contentLabel="Esimerkki modaali"
>
 Tämä On modaalin sisältö.
</ReactModal>
</div>
 );
}
viedäoletuksena Esimerkki;

Tässä koodissa käytät edelleen React-koukkuja, mutta react-modaalimoduulin kanssa. React-modal-moduulin avulla voit lisätä ponnahdusikkunaan toimintoja. Kuten näet, koodi on hyvin samanlainen kuin edellinen lähestymistapa. Ainoa ero on, että käytät nyt ReactModal-komponenttia react-modalista oman luomisen sijaan.

Ensin sinun on tuotava react-modaalimoduuli. Sitten käytät ReactModal-komponenttia ponnahdusikkunasi sisällön käärimiseen. Käytä isOpen-potkuria määrittääksesi, pitäisikö modaali olla avoin vai ei.

Kun olet luonut ponnahdusikkunan, saatat haluta lisätä siihen lisäominaisuuksia. Voit esimerkiksi sulkea ponnahdusikkunan, kun käyttäjä napsauttaa sen ulkopuolella.

Tätä varten sinun on käytettävä react-modaalikomponentin onRequestClose-ehdotusta. Tämä potkuri ottaa arvokseen funktion. Tämä toiminto suoritetaan, kun käyttäjä napsauttaa modaalin ulkopuolella.

Jos esimerkiksi haluat sulkea ponnahdusikkunan, kun käyttäjä napsauttaa sen ulkopuolella, käytä seuraavaa koodia:

tuonti Reagoi, { useState } alkaen "reagoi";
tuonti ReactModal alkaen 'react-modaalinen';
toimintoEsimerkki() {
konst [isOpen, setIsOpen] = useState(väärä);


palata (
<div>
<painike onClick={() => setIsOpen (tosi)}>
 Avaa Modal
</button>
<ReactModal
 isOpen={isOpen}
 contentLabel="Esimerkki modaali"
 onRequestClose={() => setIsOpen(väärä)}
>
 Tämä On modaalin sisältö.
</ReactModal>
</div>
 );
}
viedäoletuksena Esimerkki;

Funktio, jonka välitämme onRequestClose-ehdotukselle, yksinkertaisesti asettaa isOpen-tilamuuttujan arvoon false. Tämä saa modaalin sulkeutumaan.

Voit myös lisätä muita rekvisiitta ReactModal-komponenttiin muokataksesi sitä edelleen. Täydellinen luettelo rekvisiittasta löytyy react-modal-dokumentaatiosta.

Tyylin lisääminen ponnahdusikkunoihin

Kun olet luonut ponnahdusikkunan, haluat ehkä lisätä siihen tyyliä. On monia tapoja muotoilla React-komponentteja, mutta keskitymme sisäisiin tyyleihin.

Sisäiset tyylit ovat tyylejä, jotka voit lisätä suoraan React-komponenttiin. Jos haluat lisätä upotettuja tyylejä, sinun on käytettävä tyyli-ominaisuutta. Tämä ominaisuus ottaa arvokseen objektin, jossa avaimet ovat tyyliominaisuuksia ja arvot tyyliarvoja.

Jos esimerkiksi haluat lisätä ponnahdusikkunaan taustavärin valkoisen ja leveyden 500 pikseliä, käytä seuraavaa koodia:

tuonti Reagoi alkaen "reagoi";
toimintoEsimerkki() {
palata (
<div style={{ taustaväri: 'valkoinen', leveys: '500 pikseliä' }}>
 Tämä On ponnahdusikkunan sisältö.
</div>
 );
}
viedäoletuksena Esimerkki;

Tässä koodissa lisäät div-elementtiin style-ominaisuuden backgroundColor- ja width-ominaisuuksilla. Voit myös käytä Tailwind CSS: ää react-sovelluksessa ponnahdusikkunoiden tyyliin.

Kasvata tulosprosenttia ponnahdusikkunoilla

Ponnahdusikkunat voivat auttaa lisäämään tulosprosentteja näyttämällä käyttäjälle tärkeitä tietoja. Voit esimerkiksi käyttää ponnahdusikkunaa näyttääksesi alennuskoodin tai erikoistarjouksen. Voit myös käyttää ponnahdusikkunaa kerätäksesi sähköpostiosoitteita uutiskirjettäsi varten. Ponnahdusikkunan lisääminen React-sovellukseesi on loistava tapa lisätä tulosprosentteja.

Voit myös ottaa React-sovelluksesi helposti käyttöön ilmaiseksi GitHub-sivuilla.