Home-theater-designers
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.
MAKEUSEOF A NAP VIDEÓJA
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 } from 'react';
function Example() {
const [isOpen, setIsOpen] = useState(false);
return (
<div>
<button onClick={() => setIsOpen(true)}>
Open Pop-up
</button>
{isOpen && (
<div>
<div>
This is the content of the pop-up.
</div>
<button onClick={() => setIsOpen(false)}>
Pop-up
</button>
</div>
)}
</div>
);
}
export default Example;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.
windows 7 aero téma Windows 10 -hez
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 install react-modalMiután telepítette a react-modalt, importálhatja a React összetevőbe:
import ReactModal from 'react-modal';
import React, { useState } from 'react';
function Example() {
const [isOpen, setIsOpen] = useState(false);
return (
<div>
<button onClick={setIsOpen}>Open Modal</button>
<ReactModal
isOpen={isOpen}
contentLabel="Example Modal"
>
This is the content of the modal.
</ReactModal>
</div>
);
}
export default Example;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 onRequest propját kell használni. 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 } from 'react';
import ReactModal from 'react-modal';
function Example() {
const [isOpen, setIsOpen] = useState(false);
return (
<div>
<button onClick={() => setIsOpen(true)}>
Open Modal
</button>
<ReactModal
isOpen={isOpen}
contentLabel="Example Modal"
onRequest={() => setIsOpen(false)}
>
This is the content of the modal.
</ReactModal>
</div>
);
}
export default Example;A függvény, amelyet az onRequest propnak 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 React from 'react';
function Example() {
return (
<div style={{ backgroundColor: 'white', width: '500px' }}>
This is the content of the pop-up.
</div>
);
}
export default Example;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.
hogyan tudom elérni, hogy a számítógépem felismerje a telefonomat?
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.