Iššokantieji langai yra puikus būdas patraukti vartotojo dėmesį ir pateikti svarbią informaciją. Galite juos naudoti tokiems dalykams kaip patvirtinimo pranešimai ir klaidų pranešimai. Arba galite tiesiog juos naudoti norėdami parodyti papildomą informaciją apie puslapio elementą.

Programoje „React“ yra du iššokančiųjų langų kūrimo būdai: naudojant „React“ kabliukus arba naudojant išorinį modulį.

Kaip sukurti iššokančiuosius langus React.js

Pirmas, sukurti paprastą reagavimo programą. Po to galite pridėti iššokantįjį langą naudodami vieną iš dviejų būdų. Galite naudoti React kabliukus arba išorinį modulį.

1. „React Hooks“ naudojimas

Kabliukų metodas yra paprastesnis ir reikalauja tik kelių kodo eilučių.

Pirmiausia turite sukurti funkciją, kuri atidarys iššokantįjį langą. Šią funkciją galite apibrėžti komponente, kuriame bus rodomas iššokantis langas.

Tada turite naudoti kabliuką useState, kad sukurtumėte iššokančiojo lango būsenos kintamąjį. Šį būsenos kintamąjį galite naudoti norėdami nustatyti, ar iššokantis langas turi būti atidarytas, ar ne.

Galiausiai prie komponento turite pridėti mygtuką, kuris suaktyvins iššokantįjį langą. Kai spustelėsite šį mygtuką, nustatykite būsenos kintamąjį į true, todėl pasirodys iššokantis langas.

Pažvelkite į šio metodo kodą:

importuoti Reaguoti, { useState } iš „reaguoti“;
funkcijaPavyzdys() {
konst [isOpen, setIsOpen] = useState(klaidinga);


grąžinti (
<div>
<mygtukas onClick={() => setIsOpen (tiesa)}>
 Atidarykite iššokantįjį langą
</button>


{atidarytas && (
<div>
<div>
 Tai yra iššokančiojo lango turinį.
</div>
<mygtukas onClick={() => setIsOpen (false)}>
 Uždaryti iššokantįjį langą
</button>
</div>
 )}
</div>
 );
}
eksportuotinumatytas Pavyzdys;

Pirma, šis kodas importuoja „useState“ kabliuką iš pagrindinės reakcijos bibliotekos. Tada funkcija Pavyzdys naudoja kabliuką useState, kad sukurtų būsenos kintamąjį, vadinamą isOpen. Šis būsenos kintamasis nustato, ar iššokantis langas turi būti atidarytas, ar ne.

Tada pridėkite mygtuką prie komponento, kuris suaktyvins iššokantįjį langą. Kai spustelėsite šį mygtuką, būsenos kintamasis bus nustatytas kaip tikras, todėl pasirodys iššokantis langas.

Galiausiai prie komponento pridėkite mygtuką, kuris uždarys iššokantįjį langą. Kai spustelėsite šį mygtuką, būsenos kintamasis bus nustatytas į false, todėl iššokantis langas išnyks.

2. Išorinio modulio naudojimas

Taip pat galite kurti iššokančiuosius langus „React“ naudodami išorinį modulį. Yra daug modulių, kuriuos galite naudoti šiam tikslui.

Vienas populiarus modulis yra react-modal. „react-modal“ yra paprastas ir lengvas modulis, leidžiantis „React“ kurti modalinius dialogus.

Norėdami naudoti react-modal, pirmiausia turite jį įdiegti naudodami npm:

npm diegti reaguoti-modalinis

Įdiegę „react-modal“, galite importuoti jį į „React“ komponentą:

importuoti ReactModal iš „reaguoti-modalinis“;
importuoti Reaguoti, { useState } iš „reaguoti“;
funkcijaPavyzdys() {
konst [isOpen, setIsOpen] = useState(klaidinga);


grąžinti (
<div>
<mygtukas onClick={setIsOpen}>Atidarykite „Modal“.</button>
<ReactModal
 isOpen={isOpen}
 contentLabel="Modalo pavyzdys"
>
 Tai yra modalo turinys.
</ReactModal>
</div>
 );
}
eksportuotinumatytas Pavyzdys;

Šiame kode jūs vis dar naudojate „React“ kabliukus, bet su „react-modal“ moduliu. Naudodami „react-modal“ modulį galite pridėti daugiau funkcijų prie iššokančiojo lango. Kaip matote, kodas labai panašus į ankstesnį metodą. Vienintelis skirtumas yra tas, kad dabar naudojate „ReactModal“ komponentą iš „react-modal“, o ne kuriate savo.

Pirmiausia turite importuoti react-modal modulį. Tada naudokite „ReactModal“ komponentą, kad apvyniotumėte iššokančiojo lango turinį. Naudokite „isOpen“ atramą, kad nustatytumėte, ar modalas turi būti atidarytas, ar ne.

Sukūrę iššokantįjį langą, galbūt norėsite pridėti papildomų funkcijų. Pavyzdžiui, galbūt norėsite uždaryti iššokantįjį langą, kai vartotojas spusteli už jo ribų.

Norėdami tai padaryti, turite naudoti react-modal komponento parinktį onRequestClose. Šis rekvizitas turi funkciją kaip jo vertę. Ši funkcija veiks, kai vartotojas spustelėja už modalo ribų.

Pavyzdžiui, norėdami uždaryti iššokantįjį langą, kai vartotojas spusteli už jo ribų, turėtumėte naudoti šį kodą:

importuoti Reaguoti, { useState } iš „reaguoti“;
importuoti ReactModal iš „reaguoti-modalinis“;
funkcijaPavyzdys() {
konst [isOpen, setIsOpen] = useState(klaidinga);


grąžinti (
<div>
<mygtukas onClick={() => setIsOpen (tiesa)}>
 Atidarykite „Modal“.
</button>
<ReactModal
 isOpen={isOpen}
 contentLabel="Modalo pavyzdys"
 onRequestClose={() => setIsOpen(klaidinga)}
>
 Tai yra modalo turinys.
</ReactModal>
</div>
 );
}
eksportuotinumatytas Pavyzdys;

Funkcija, kurią perduodame „onRequestClose“ pasiūlymui, tiesiog nustato „isOpen“ būsenos kintamąjį į „false“. Dėl to modalas užsidarys.

Taip pat galite pridėti kitų rekvizitų prie „ReactModal“ komponento, kad jį dar labiau pritaikytumėte. Išsamų rekvizitų sąrašą galite peržiūrėti react-modal dokumentacijoje.

Stiliaus pridėjimas iššokančiuosiuose languose

Sukūrę iššokantįjį langą, galbūt norėsite pridėti šiek tiek stiliaus. Yra daug būdų, kaip stilizuoti React komponentus, tačiau mes sutelksime dėmesį į eilutinius stilius.

Įterptieji stiliai yra stiliai, kuriuos galite pridėti tiesiogiai prie „React“ komponento. Norėdami pridėti eilutinių stilių, turite naudoti stiliaus ypatybę. Ši ypatybė paima objektą kaip savo vertę, kur raktai yra stiliaus ypatybės, o reikšmės yra stiliaus reikšmės.

Pavyzdžiui, norėdami pridėti balto fono spalvą ir 500 pikselių plotį prie iššokančiojo lango, turėtumėte naudoti šį kodą:

importuoti Reaguoti iš „reaguoti“;
funkcijaPavyzdys() {
grąžinti (
<div style={{ fono spalva: 'baltas', plotis: '500 piks' }}>
 Tai yra iššokančiojo lango turinį.
</div>
 );
}
eksportuotinumatytas Pavyzdys;

Šiame kode stiliaus ypatybę pridedate prie div elemento su backgroundColor ir pločio ypatybėmis. Tu taip pat gali naudokite Tailwind CSS react programoje norėdami sukurti iššokančiųjų langų stilių.

Padidinkite konversijų rodiklį naudodami iššokančiuosius langus

Iššokantieji langai gali padėti padidinti konversijų rodiklius, nes vartotojui pateikiama svarbi informacija. Pavyzdžiui, galite naudoti iššokantįjį langą, kad būtų rodomas nuolaidos kodas arba specialus pasiūlymas. Taip pat galite naudoti iššokantįjį langą, kad rinktumėte naujienlaiškio el. pašto adresus. Iššokančiojo lango pridėjimas prie programos „React“ yra puikus būdas padidinti konversijų rodiklius.

Taip pat galite lengvai nemokamai įdiegti „React“ programą „GitHub“ puslapiuose.