Home-theater-designers
Всплывающие окна — отличный способ привлечь внимание пользователя и отобразить важную информацию. Вы можете использовать их для таких вещей, как подтверждающие сообщения и сообщения об ошибках. Или вы можете просто использовать их для отображения дополнительной информации об элементе на странице.
В React есть два способа создания всплывающих окон: с помощью хуков React или с помощью внешнего модуля.
СДЕЛАТЬ ВИДЕО ДНЯ
Как создавать всплывающие окна в React.js
Первый, создать простое приложение для реагирования . После этого вы можете добавить всплывающее окно одним из двух способов. Вы можете использовать хуки React или внешний модуль.
1. Использование хуков React
Подход с хуками проще и требует всего несколько строк кода.
Во-первых, вам нужно создать функцию, которая будет открывать всплывающее окно. Вы можете определить эту функцию в компоненте, который будет отображать всплывающее окно.
Затем вам нужно использовать хук useState, чтобы создать переменную состояния для всплывающего окна. Вы можете использовать эту переменную состояния, чтобы определить, должно ли всплывающее окно быть открытым или нет.
Наконец, вам нужно добавить кнопку к вашему компоненту, которая вызовет всплывающее окно. Когда вы нажимаете эту кнопку, установите для переменной состояния значение true, что приведет к появлению всплывающего окна.
Взгляните на код для этого подхода:
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;Во-первых, этот код импортирует хук useState из основной библиотеки реагирования. Затем функция Example использует хук useState для создания переменной состояния с именем isOpen. Эта переменная состояния определяет, должно ли всплывающее окно быть открытым или нет.
Затем добавьте к компоненту кнопку, которая вызовет всплывающее окно. Когда вы нажмете эту кнопку, для переменной состояния будет установлено значение true, что приведет к появлению всплывающего окна.
Наконец, добавьте к компоненту кнопку, которая закроет всплывающее окно. Когда вы нажмете эту кнопку, для переменной состояния будет установлено значение false, что приведет к исчезновению всплывающего окна.
2. Использование внешнего модуля
Вы также можете создавать всплывающие окна в React с помощью внешнего модуля. Есть много доступных модулей, которые вы можете использовать для этой цели.
Один из популярных модулей — реактивно-модальный. react-modal — это простой и легкий модуль, который позволяет создавать модальные диалоги в React.
Чтобы использовать react-modal, вам сначала нужно установить его с помощью npm:
npm install react-modalПосле того, как вы установили react-modal, вы можете импортировать его в свой компонент React:
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;В этом коде вы все еще используете хуки React, но с модулем react-modal. С модулем react-modal вы можете добавить больше функциональности всплывающему окну. Как видите, код очень похож на предыдущий подход. Единственное отличие состоит в том, что теперь вы используете компонент ReactModal из react-modal вместо того, чтобы создавать свой собственный.
отключить сетевой доступ к реестру Windows
Во-первых, вам нужно импортировать модуль react-modal. Затем вы используете компонент ReactModal для переноса содержимого вашего всплывающего окна. Используйте реквизит isOpen, чтобы определить, должно ли модальное окно быть открытым или нет.
После того, как вы создали свое всплывающее окно, вы можете добавить к нему дополнительные функции. Например, вы можете закрыть всплывающее окно, когда пользователь щелкает за его пределами.
Для этого вам нужно использовать свойство onRequest модального компонента. Это свойство принимает функцию в качестве значения. Эта функция запускается, когда пользователь щелкает за пределами модального окна.
Например, чтобы закрыть всплывающее окно, когда пользователь щелкает за его пределами, вы должны использовать следующий код:
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;Функция, которую мы передаем в свойство onRequest, просто устанавливает для переменной состояния isOpen значение false. Это приведет к закрытию модального окна.
Вы также можете добавить другие реквизиты в компонент ReactModal для его дальнейшей настройки. Полный список реквизитов вы можете найти в документации по модулю реагирования.
Добавление стилей во всплывающие окна
После того, как вы создали свое всплывающее окно, вы можете добавить к нему некоторые стили. Есть много способов стилизовать компоненты React, но мы сосредоточимся на встроенных стилях.
Встроенные стили — это стили, которые вы можете добавить непосредственно в компонент React. Чтобы добавить встроенные стили, вам нужно использовать свойство стиля. Это свойство принимает объект в качестве своего значения, где ключи — это свойства стиля, а значения — значения стиля.
Например, чтобы добавить белый цвет фона и ширину 500 пикселей во всплывающее окно, вы должны использовать следующий код:
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;В этом коде вы добавляете свойство стиля к элементу div со свойствами backgroundColor и width. Вы также можете использовать Tailwind CSS в реагирующем приложении для оформления всплывающих окон.
Увеличьте коэффициент конверсии с помощью всплывающих окон
Всплывающие окна могут помочь увеличить коэффициент конверсии, отображая важную информацию для пользователя. Например, вы можете использовать всплывающее окно для отображения кода скидки или специального предложения. Вы также можете использовать всплывающее окно для сбора адресов электронной почты для своей рассылки. Добавление всплывающего окна в ваше приложение React — отличный способ повысить коэффициент конверсии.
Вы также можете бесплатно развернуть свое приложение React на страницах GitHub.