Wyskakujące okienka to świetny sposób na przyciągnięcie uwagi użytkownika i wyświetlenie ważnych informacji. Możesz ich używać do takich rzeczy, jak komunikaty potwierdzające i komunikaty o błędach. Lub możesz po prostu użyć ich do wyświetlenia dodatkowych informacji o elemencie na stronie.
W React istnieją dwa sposoby tworzenia wyskakujących okienek: za pomocą haków React lub za pomocą zewnętrznego modułu.
Jak tworzyć wyskakujące okienka w React.js
Pierwszy, utwórz prostą aplikację reagującą. Następnie możesz dodać wyskakujące okienko, korzystając z jednej z dwóch metod. Możesz użyć haków React lub zewnętrznego modułu.
1. Korzystanie z hooków reagowania
Podejście hooków jest prostsze i wymaga tylko kilku linii kodu.
Najpierw musisz utworzyć funkcję, która otworzy wyskakujące okienko. Możesz zdefiniować tę funkcję w komponencie, który będzie wyświetlał pop-up.
Następnie musisz użyć haka useState, aby utworzyć zmienną stanu dla wyskakującego okienka. Możesz użyć tej zmiennej stanu, aby określić, czy wyskakujące okienko powinno być otwarte, czy nie.
Na koniec musisz dodać przycisk do swojego komponentu, który uruchomi wyskakujące okienko. Po kliknięciu tego przycisku ustaw zmienną stanu na true, co spowoduje pojawienie się wyskakującego okienka.
Spójrz na kod tego podejścia:
import Reaguj, { stan użycia } z 'reagować';funkcjonowaćPrzykład() {
konst [isOpen, setIsOpen] = useState(FAŁSZ);powrót (
<dz>
<przycisk onClick={() => setIsOpen (prawda)}>
Otwórz wyskakujące okienko
</button>{jest otwarte && (
<dz>
<dz>
Ten Jest zawartość wyskakującego okienka.
</div>
<przycisk onClick={() => setIsOpen (fałsz)}>
Zamknij wyskakujące okienko
</button>
</div>
)}
</div>
);
}
eksportdomyślny Przykład;
Po pierwsze, ten kod importuje hak useState z podstawowej biblioteki reagowania. Następnie funkcja Example używa haka useState do utworzenia zmiennej stanu o nazwie isOpen. Ta zmienna stanu określa, czy wyskakujące okienko powinno być otwarte, czy nie.
Następnie dodaj przycisk do komponentu, który wywoła wyskakujące okienko. Po kliknięciu tego przycisku zmienna stanu zostanie ustawiona na wartość true, co spowoduje pojawienie się wyskakującego okienka.
Na koniec dodaj do komponentu przycisk, który zamknie pop-up. Po kliknięciu tego przycisku zmienna stanu zostanie ustawiona na wartość false, co spowoduje zniknięcie wyskakującego okienka.
2. Korzystanie z modułu zewnętrznego
Możesz także tworzyć wyskakujące okienka w React za pomocą zewnętrznego modułu. Dostępnych jest wiele modułów, które można wykorzystać do tego celu.
Jednym z popularnych modułów jest modalny reagowanie. react-modal to prosty i lekki moduł, który pozwala tworzyć modalne okna dialogowe w React.
Aby użyć modu reagowania, musisz go najpierw zainstalować za pomocą npm:
np zainstalować reagowanie modalnePo zainstalowaniu modalu reakcji możesz zaimportować go do swojego komponentu React:
import ReactModal z „reagowanie modalne”;
import Reaguj, { stan użycia } z 'reagować';funkcjonowaćPrzykład() {
konst [isOpen, setIsOpen] = useState(FAŁSZ);powrót (
<dz>
<button onClick={setIsOpen}>Otwórz moduł</button>
<ReactModal
isOpen={isOpen}
Etykieta zawartości="Przykład modalny"
>
Ten Jest treść modalu.
</ReactModal>
</div>
);
}
eksportdomyślny Przykład;
W tym kodzie nadal używasz haków React, ale z modułem modalnym reakcji. Dzięki modułowi modalnemu reakcji możesz dodać więcej funkcji do wyskakującego okienka. Jak widać, kod jest bardzo podobny do poprzedniego podejścia. Jedyna różnica polega na tym, że teraz używasz komponentu ReactModal z react-modal zamiast tworzyć własny.
Najpierw musisz zaimportować moduł modalny reakcji. Następnie używasz komponentu ReactModal do zawijania zawartości wyskakującego okienka. Użyj właściwości isOpen, aby określić, czy modal powinien być otwarty, czy nie.
Po utworzeniu wyskakującego okienka możesz chcieć dodać do niego dodatkowe funkcje. Na przykład możesz chcieć zamknąć wyskakujące okienko, gdy użytkownik kliknie poza nim.
Aby to zrobić, musisz użyć właściwości onRequestClose komponentu modalnego reakcji. Ten rekwizyt przyjmuje funkcję jako swoją wartość. Ta funkcja zostanie uruchomiona, gdy użytkownik kliknie poza modułem.
Na przykład, aby zamknąć wyskakujące okienko, gdy użytkownik kliknie poza nim, użyjesz następującego kodu:
import Reaguj, { stan użycia } z 'reagować';
import ReactModal z „reagowanie modalne”;funkcjonowaćPrzykład() {
konst [isOpen, setIsOpen] = useState(FAŁSZ);powrót (
<dz>
<przycisk onClick={() => setIsOpen (prawda)}>
Otwórz moduł
</button>
<ReactModal
isOpen={isOpen}
Etykieta zawartości="Przykład modalny"
onRequestClose={() => setIsOpen(FAŁSZ)}
>
Ten Jest treść modalu.
</ReactModal>
</div>
);
}
eksportdomyślny Przykład;
Funkcja, którą przekazujemy do właściwości onRequestClose, po prostu ustawia zmienną stanu isOpen na wartość false. Spowoduje to zamknięcie modu.
Możesz także dodać inne rekwizyty do komponentu ReactModal, aby jeszcze bardziej go dostosować. Pełną listę rekwizytów można znaleźć w dokumentacji modalnej reakcji.
Dodawanie stylizacji w wyskakujących okienkach
Po utworzeniu wyskakującego okienka możesz chcieć dodać do niego trochę stylizacji. Istnieje wiele sposobów stylizowania komponentów Reacta, ale my skupimy się na stylach wbudowanych.
Style wbudowane to style, które można dodać bezpośrednio do komponentu React. Aby dodać style wbudowane, musisz użyć właściwości style. Ta właściwość przyjmuje obiekt jako swoją wartość, gdzie klucze są właściwościami stylu, a wartości są wartościami stylu.
Na przykład, aby dodać biały kolor tła i szerokość 500 pikseli do wyskakującego okienka, użyj następującego kodu:
import Reagować z 'reagować';funkcjonowaćPrzykład() {
powrót (
<styl div={{Kolor tła: 'biały', szerokość: '500 pikseli' }}>
Ten Jest zawartość wyskakującego okienka.
</div>
);
}
eksportdomyślny Przykład;
W tym kodzie dodajesz właściwość style do elementu div z właściwościami backgroundColor i width. Możesz również użyj CSS Tailwind w aplikacji reagującej stylizować wyskakujące okienka.
Zwiększ współczynnik konwersji dzięki wyskakującym okienkom
Wyskakujące okienka mogą pomóc zwiększyć współczynniki konwersji, wyświetlając użytkownikowi ważne informacje. Na przykład możesz użyć wyskakującego okienka, aby wyświetlić kod rabatowy lub ofertę specjalną. Możesz również użyć wyskakującego okienka do zbierania adresów e-mail do biuletynu. Dodanie wyskakującego okienka do aplikacji React to świetny sposób na zwiększenie współczynnika konwersji.
Możesz także łatwo wdrożyć swoją aplikację React za darmo na stronach GitHub.