Изскачащите прозорци са чудесен начин да привлечете вниманието на вашия потребител и да покажете важна информация. Можете да ги използвате за неща като съобщения за потвърждение и съобщения за грешки. Или можете просто да ги използвате, за да покажете допълнителна информация за елемент на страница.

В React има два начина за създаване на изскачащи прозорци: използване на куки React или използване на външен модул.

Как да създадете изскачащи прозорци в React.js

първо, създайте просто приложение за реакция. След това можете да добавите изскачащ прозорец, като използвате един от двата метода. Можете да използвате React hooks или външен модул.

1. Използване на React Hooks

Подходът с куките е по-прост и изисква само няколко реда код.

Първо, трябва да създадете функция, която ще отваря изскачащия прозорец. Можете да дефинирате тази функция в компонента, който ще показва изскачащия прозорец.

След това трябва да използвате куката useState, за да създадете променлива на състоянието за изскачащия прозорец. Можете да използвате тази променлива на състоянието, за да определите дали изскачащият прозорец трябва да бъде отворен или не.

instagram viewer

И накрая, трябва да добавите бутон към вашия компонент, който ще задейства изскачащия прозорец. Когато щракнете върху този бутон, задайте променливата на състоянието на true, което ще доведе до появата на изскачащия прозорец.

Разгледайте кода за този подход:

импортиране Реагирайте, {useState} от 'реагира';
функцияПример() {
конст [isOpen, setIsOpen] = useState(невярно);


връщане (
<див>
<бутон onClick={() => setIsOpen (true)}>
 Отворете изскачащ прозорец
</button>


{е отворено && (
<див>
<див>
 Това е съдържанието на изскачащия прозорец.
</div>
<бутон onClick={() => setIOpen (false)}>
 Затворете изскачащия прозорец
</button>
</div>
 )}
</div>
 );
}
износпо подразбиране пример;

Първо, този код импортира куката useState от основната библиотека за реакция. След това функцията Пример използва куката useState, за да създаде променлива на състоянието, наречена isOpen. Тази променлива на състоянието определя дали изскачащият прозорец трябва да бъде отворен или не.

След това добавете бутон към компонента, който ще задейства изскачащия прозорец. Когато щракнете върху този бутон, променливата на състоянието ще бъде зададена на true, което ще доведе до появата на изскачащия прозорец.

Накрая добавете бутон към компонента, който ще затвори изскачащия прозорец. Когато щракнете върху този бутон, променливата на състоянието ще бъде зададена на false, което ще доведе до изчезването на изскачащия прозорец.

2. Използване на външен модул

Можете също да създавате изскачащи прозорци в React с помощта на външен модул. Има много налични модули, които можете да използвате за тази цел.

Един популярен модул е ​​реагиращ модален. react-modal е прост и лек модул, който ви позволява да създавате модални диалози в React.

За да използвате react-modal, първо трябва да го инсталирате с помощта на npm:

npm Инсталирай реагират-модални

След като инсталирате react-modal, можете да го импортирате във вашия React компонент:

импортиране ReactModal от 'реагиране-модал';
импортиране Реагирайте, {useState} от 'реагира';
функцияПример() {
конст [isOpen, setIsOpen] = useState(невярно);


връщане (
<див>
<бутон onClick={setIsOpen}>Отворете Modal</button>
<ReactModal
 isOpen={е отворено}
 contentLabel="Примерен модален"
>
 Това е съдържанието на модала.
</ReactModal>
</div>
 );
}
износпо подразбиране пример;

В този код все още използвате куките React, но с модула react-modal. С модула react-modal можете да добавите повече функционалност към изскачащия прозорец. Както можете да видите, кодът е много подобен на предишния подход. Единствената разлика е, че сега използвате компонента ReactModal от react-modal, вместо да създавате свой собствен.

Първо, трябва да импортирате модула react-modal. След това използвате компонента ReactModal, за да обвиете съдържанието на вашия изскачащ прозорец. Използвайте проп isOpen, за да определите дали модалът трябва да бъде отворен или не.

След като създадете своя изскачащ прозорец, може да искате да добавите допълнителни функции към него. Например, може да искате да затворите изскачащия прозорец, когато потребителят щракне извън него.

За да направите това, трябва да използвате onRequestClose prop на компонента react-modal. Този проп приема функция като своя стойност. Тази функция ще се изпълнява, когато потребителят кликне извън модала.

Например, за да затворите изскачащия прозорец, когато потребителят кликне извън него, ще използвате следния код:

импортиране Реагирайте, {useState} от 'реагира';
импортиране ReactModal от 'реагиране-модал';
функцияПример() {
конст [isOpen, setIsOpen] = useState(невярно);


връщане (
<див>
<бутон onClick={() => setIsOpen (true)}>
 Отворете Modal
</button>
<ReactModal
 isOpen={е отворено}
 contentLabel="Примерен модален"
 onRequestClose={() => setIsOpen(невярно)}
>
 Това е съдържанието на модала.
</ReactModal>
</div>
 );
}
износпо подразбиране пример;

Функцията, която предаваме на подложката onRequestClose, просто задава променливата на състоянието isOpen на false. Това ще доведе до затваряне на модала.

Можете също да добавите други подпори към компонента ReactModal, за да го персонализирате допълнително. За пълен списък с подпори можете да проверите документацията за реакция-модал.

Добавяне на стил в изскачащи прозорци

След като създадете своя изскачащ прозорец, може да искате да добавите малко стил към него. Има много начини за стилизиране на React компоненти, но ние ще се съсредоточим върху вградените стилове.

Вградените стилове са стилове, които можете да добавите директно към компонент на React. За да добавите вградени стилове, трябва да използвате свойството style. Това свойство приема обект като своя стойност, където ключовете са свойствата на стила, а стойностите са стойностите на стила.

Например, за да добавите бял фонов цвят и ширина 500px към изскачащ прозорец, ще използвате следния код:

импортиране Реагирайте от 'реагира';
функцияПример() {
връщане (
<div style={{ backgroundColor: 'бяло', ширина: '500 пиксела' }}>
 Това е съдържанието на изскачащия прозорец.
</div>
 );
}
износпо подразбиране пример;

В този код добавяте свойството style към елемента div със свойствата backgroundColor и width. Можете също използвайте Tailwind CSS в приложението React за стилизиране на вашите изскачащи прозорци.

Увеличете процента на реализация с изскачащи прозорци

Изскачащите прозорци могат да помогнат за увеличаване на процента на реализация, като показват важна информация на потребителя. Например, можете да използвате изскачащ прозорец, за да покажете код за отстъпка или специална оферта. Можете също да използвате изскачащ прозорец, за да събирате имейл адреси за вашия бюлетин. Добавянето на изскачащ прозорец към вашето приложение React е чудесен начин да увеличите процента на реализация.

Можете също така лесно да внедрите приложението си React безплатно на страниците на GitHub.