Всплывающие окна — отличный способ привлечь внимание пользователя и отобразить важную информацию. Вы можете использовать их для таких вещей, как подтверждающие сообщения и сообщения об ошибках. Или вы можете просто использовать их для отображения дополнительной информации об элементе на странице.

В React есть два способа создания всплывающих окон: с помощью хуков React или с помощью внешнего модуля.

Как создавать всплывающие окна в React.js

Первый, создать простое приложение для реагирования. После этого вы можете добавить всплывающее окно одним из двух способов. Вы можете использовать хуки React или внешний модуль.

1. Использование хуков React

Подход с хуками проще и требует всего несколько строк кода.

Во-первых, вам нужно создать функцию, которая будет открывать всплывающее окно. Вы можете определить эту функцию в компоненте, который будет отображать всплывающее окно.

Затем вам нужно использовать хук useState, чтобы создать переменную состояния для всплывающего окна. Вы можете использовать эту переменную состояния, чтобы определить, должно ли всплывающее окно быть открытым или нет.

instagram viewer

Наконец, вам нужно добавить кнопку к вашему компоненту, которая вызовет всплывающее окно. Когда вы нажимаете эту кнопку, установите для переменной состояния значение true, что приведет к появлению всплывающего окна.

Взгляните на код для этого подхода:

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


возвращаться (
<див>
<кнопка onClick={() => setIsOpen (истина)}>
 Открыть всплывающее окно
</button>


{открыт && (
<див>
<див>
 Этот является содержание всплывающего окна.
</div>
<кнопка onClick={() => setIsOpen (ложь)}>
 Закрыть всплывающее окно
</button>
</div>
 )}
</div>
 );
}
экспортпо умолчанию Пример;

Во-первых, этот код импортирует хук useState из основной библиотеки реагирования. Затем функция Example использует хук useState для создания переменной состояния с именем isOpen. Эта переменная состояния определяет, должно ли всплывающее окно быть открытым или нет.

Затем добавьте к компоненту кнопку, которая вызовет всплывающее окно. Когда вы нажмете эту кнопку, для переменной состояния будет установлено значение true, что приведет к появлению всплывающего окна.

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

2. Использование внешнего модуля

Вы также можете создавать всплывающие окна в React с помощью внешнего модуля. Есть много доступных модулей, которые вы можете использовать для этой цели.

Один из популярных модулей — реактивно-модальный. react-modal — это простой и легкий модуль, который позволяет создавать модальные диалоги в React.

Чтобы использовать react-modal, вам сначала нужно установить его с помощью npm:

нпм установить реактивно-модальный

После того, как вы установили react-modal, вы можете импортировать его в свой компонент React:

Импортировать РеактМодал от «реагирующий модальный»;
Импортировать Реагировать, {useState} от 'реагировать';
функцияПример() {
константа [isOpen, setIsOpen] = useState(ЛОЖЬ);


возвращаться (
<див>
<кнопка onClick={setIsOpen}>Открытый модальный</button>
<РеактМодал
 isOpen={isOpen}
 метка содержимого ="Пример Модальный"
>
 Этот является содержание модального.
</ReactModal>
</div>
 );
}
экспортпо умолчанию Пример;

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

Во-первых, вам нужно импортировать модуль react-modal. Затем вы используете компонент ReactModal для переноса содержимого вашего всплывающего окна. Используйте реквизит isOpen, чтобы определить, должно ли модальное окно быть открытым или нет.

После того, как вы создали свое всплывающее окно, вы можете добавить к нему дополнительные функции. Например, вы можете закрыть всплывающее окно, когда пользователь щелкает за его пределами.

Для этого вам нужно использовать свойство onRequestClose модального компонента. Это свойство принимает функцию в качестве значения. Эта функция запускается, когда пользователь щелкает за пределами модального окна.

Например, чтобы закрыть всплывающее окно, когда пользователь щелкает за его пределами, вы должны использовать следующий код:

Импортировать Реагировать, {useState} от 'реагировать';
Импортировать РеактМодал от «реагирующий модальный»;
функцияПример() {
константа [isOpen, setIsOpen] = useState(ЛОЖЬ);


возвращаться (
<див>
<кнопка onClick={() => setIsOpen (истина)}>
 Открытый модальный
</button>
<РеактМодал
 isOpen={isOpen}
 метка содержимого ="Пример Модальный"
 onRequestClose={() => setIsOpen(ЛОЖЬ)}
>
 Этот является содержание модального.
</ReactModal>
</div>
 );
}
экспортпо умолчанию Пример;

Функция, которую мы передаем в свойство onRequestClose, просто устанавливает для переменной состояния isOpen значение false. Это приведет к закрытию модального окна.

Вы также можете добавить другие реквизиты в компонент ReactModal для его дальнейшей настройки. Полный список реквизитов вы можете найти в документации по модулю реагирования.

Добавление стилей во всплывающие окна

После того, как вы создали свое всплывающее окно, вы можете добавить к нему некоторые стили. Есть много способов стилизовать компоненты React, но мы сосредоточимся на встроенных стилях.

Встроенные стили — это стили, которые вы можете добавить непосредственно в компонент React. Чтобы добавить встроенные стили, вам нужно использовать свойство стиля. Это свойство принимает объект в качестве своего значения, где ключи — это свойства стиля, а значения — значения стиля.

Например, чтобы добавить белый цвет фона и ширину 500 пикселей во всплывающее окно, вы должны использовать следующий код:

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

В этом коде вы добавляете свойство стиля к элементу div со свойствами backgroundColor и width. Вы также можете использовать Tailwind CSS в реагирующем приложении для оформления всплывающих окон.

Увеличьте коэффициент конверсии с помощью всплывающих окон

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

Вы также можете бесплатно развернуть свое приложение React на страницах GitHub.