Adjon hozzá előugró effektusokat a React.js alkalmazáshoz

Az előugró ablakok nagyszerű módja annak, hogy felhívja a felhasználó figyelmét és megjelenítse a fontos információkat. Használhatja őket például megerősítő üzenetekhez és hibaüzenetekhez. Vagy egyszerűen csak arra használhatja őket, hogy további információkat jelenítsen meg az oldalon lévő elemekkel kapcsolatban.

A React alkalmazásban kétféleképpen hozhat létre előugró ablakokat: React hook használatával vagy külső modul használatával.

Előugró ablakok létrehozása a React.js-ben

Első, hozzon létre egy egyszerű reagáló alkalmazást. Ezt követően két módszer valamelyikével felvehet egy előugró ablakot. Használhat React horgokat vagy külső modult.

1. React Hooks használata

A hooks megközelítés egyszerűbb, és csak néhány sornyi kódot igényel.

Először létre kell hoznia egy funkciót, amely megnyitja a felugró ablakot. Ezt a funkciót az előugró ablakot megjelenítő összetevőben határozhatja meg.

Ezután a useState hook segítségével hozzon létre állapotváltozót az előugró ablakhoz. Ezzel az állapotváltozóval meghatározhatja, hogy az előugró ablak nyitva legyen-e vagy sem.

Végül hozzá kell adnia egy gombot az összetevőhöz, amely elindítja a felugró ablakot. Amikor erre a gombra kattint, állítsa az állapotváltozót igaz értékre, amitől megjelenik az előugró ablak.

Tekintse meg ennek a megközelítésnek a kódját:

import React, { useState } tól től 'reagál';
funkcióPélda() {
const [isOpen, setIsOpen] = useState(hamis);
Visszatérés (
<div>
<gomb onClick={() => setIsOpen (igaz)}>
 Nyissa meg a felugró ablakot
</button>
{nyitva van && (
<div>
<div>
 Ez van az előugró ablak tartalma.
</div>
<gomb onClick={() => setIsOpen (hamis)}>
 Felugró ablak bezárása
</button>
</div>
 )}
</div>
 );
}
exportalapértelmezett Példa;

Először is, ez a kód importálja a useState hook-ot az alapvető reakciókönyvtárból. Ezután a Példa függvény a useState hook segítségével létrehoz egy isOpen nevű állapotváltozót. Ez az állapotváltozó határozza meg, hogy az előugró ablak nyitva legyen-e vagy sem.

Ezután adjon hozzá egy gombot az összetevőhöz, amely kiváltja az előugró ablakot. Ha erre a gombra kattint, az állapotváltozó igaz értékre lesz állítva, aminek hatására megjelenik az előugró ablak.

Végül adjon hozzá egy gombot az összetevőhöz, amely bezárja az előugró ablakot. Ha erre a gombra kattint, az állapotváltozó hamisra lesz állítva, aminek következtében az előugró ablak eltűnik.

2. Külső modul használata

Külső modul használatával előugró ablakokat is létrehozhat a Reactban. Számos modul áll rendelkezésre, amelyeket erre a célra használhat.

Az egyik népszerű modul a react-modális. A react-modal egy egyszerű és könnyű modul, amely lehetővé teszi modális párbeszédpanelek létrehozását a Reactban.

A react-modal használatához először telepítenie kell az npm használatával:

npm telepítés reagál-modális

Miután telepítette a react-modalt, importálhatja a React összetevőbe:

import ReactModal tól től „react-modális”;
import React, { useState } tól től 'reagál';
funkcióPélda() {
const [isOpen, setIsOpen] = useState(hamis);
Visszatérés (
<div>
<gomb onClick={setIsOpen}>Nyissa meg a Modalt</button>
<ReactModal
 isOpen={isOpen}
 contentLabel="Példa Modal"
>
 Ez van a modális tartalma.
</ReactModal>
</div>
 );
}
exportalapértelmezett Példa;

Ebben a kódban továbbra is a React hookokat használja, de a react-modális modullal. A react-modal modullal további funkciókat adhat a felugró ablakhoz. Mint látható, a kód nagyon hasonlít az előző megközelítéshez. Az egyetlen különbség az, hogy a saját létrehozása helyett most a react-modal ReactModal komponensét használja.

Először is importálnia kell a react-modal modult. Ezután használja a ReactModal összetevőt az előugró ablak tartalmának tördeléséhez. Használja az isOpen támaszt annak meghatározására, hogy a modálisnak nyitottnak kell-e lennie vagy sem.

Miután létrehozta az előugró ablakot, érdemes további funkciókat hozzáadni hozzá. Például bezárhatja az előugró ablakot, amikor a felhasználó azon kívülre kattint.

Ehhez a react-modal komponens onRequestClose propját kell használnia. Ez a támasz egy függvényt vesz fel értékként. Ez a funkció akkor fut le, amikor a felhasználó a modálison kívülre kattint.

Például az előugró ablak bezárásához, amikor a felhasználó azon kívül kattint, a következő kódot kell használnia:

import React, { useState } tól től 'reagál';
import ReactModal tól től „react-modális”;
funkcióPélda() {
const [isOpen, setIsOpen] = useState(hamis);
Visszatérés (
<div>
<gomb onClick={() => setIsOpen (igaz)}>
 Nyissa meg a Modalt
</button>
<ReactModal
 isOpen={isOpen}
 contentLabel="Példa Modal"
 onRequestClose={() => setIsOpen(hamis)}
>
 Ez van a modális tartalma.
</ReactModal>
</div>
 );
}
exportalapértelmezett Példa;

A függvény, amelyet az onRequestClose javaslatnak adunk át, egyszerűen false értékre állítja az isOpen állapotváltozót. Ez a modál bezárását okozza.

A ReactModal komponenshez további kellékeket is hozzáadhat a további testreszabáshoz. A kellékek teljes listájáért tekintse meg a react-modal dokumentációt.

Stílus hozzáadása a felugró ablakokban

Miután létrehozta az előugró ablakot, érdemes lehet stílust adni hozzá. Számos módja van a React összetevők stílusának, de mi a belső stílusokra fogunk összpontosítani.

A soron belüli stílusok olyan stílusok, amelyeket közvetlenül hozzáadhat egy React összetevőhöz. Soron belüli stílusok hozzáadásához használnia kell a style tulajdonságot. Ez a tulajdonság egy objektumot vesz fel értékként, ahol a kulcsok a stílustulajdonságok, az értékek pedig a stílusértékek.

Ha például egy előugró ablakhoz fehér háttérszínt és 500 képpont szélességet szeretne hozzáadni, akkor a következő kódot kell használnia:

import Reagál tól től 'reagál';
funkcióPélda() {
Visszatérés (
<div style={{ backgroundColor: 'fehér', szélesség: '500 képpont' }}>
 Ez van az előugró ablak tartalma.
</div>
 );
}
exportalapértelmezett Példa;

Ebben a kódban hozzáadja a style tulajdonságot a div elemhez a backgroundColor és a width tulajdonságokkal. Te is használja a Tailwind CSS-t a React alkalmazásban az előugró ablakok stílusának kialakításához.

Növelje a konverziós arányt előugró ablakokkal

Az előugró ablakok segíthetnek növelni a konverziós arányt azáltal, hogy fontos információkat jelenítenek meg a felhasználó számára. Például használhat egy felugró ablakot egy kedvezménykód vagy egy különleges ajánlat megjelenítéséhez. Használhat egy felugró ablakot is a hírleveléhez szükséges e-mail címek összegyűjtésére. Egy előugró ablak hozzáadása a React alkalmazáshoz nagyszerű módja a konverziós arány növelésének.

Könnyedén ingyenesen telepítheti React alkalmazását a GitHub oldalain.