Создание всплывающего окна в React с хуками и контекстом
Создать самозакрывающееся всплывающее окно в React можно невероятно легко с помощью всего нескольких действительно полезных инструментов. Все, что нам нужно сделать, это:
- Создайте контекст для всплывающего окна
- Создайте всплывающий компонент, который умеет очищать себя
- Запустите всплывающее окно, чтобы открыть любой текст, который мы хотим
Такое всплывающее окно - отличный способ реагировать на действия пользователя, не будучи слишком навязчивыми.
Создание контекста
Когда я использую контекст в React, мне нравится разбивать его на три части, которые действительно легко использовать и запоминать.
- Создание контекста
- Создание провайдера
- Создание способа извлечения значений из контекста
Контекст всплывающего окна использует ловушку useState для хранения и установки значения всплывающего окна.
TriggerPopup и clearPopup используются исключительно для удобства чтения, хотя можно напрямую использовать useState в качестве значения поставщика, а usePopup, которая является функцией, которая возвращает значение контекста, является изящным способом получить эти значения из вашего приложения.
Создание всплывающего компонента
Идея компонента всплывающего окна состоит в том, чтобы узнать, когда он получил значение для отображения всплывающего окна, и очистить себя через заданное время. Этого можно добиться как с помощью ловушки useEffect, так и с помощью setTimeout.
Используя созданный ранее хук usePopup, мы можем получить значение и функцию clearPopup. Значение будет использоваться в массиве зависимостей useEffect, чтобы компонент обновлялся каждый раз при изменении значения.
Внутри useEffect происходит волшебство, мы используем setTimeout, чтобы сказать, что по истечении заданного времени мы очистим значение всплывающего окна, которое также будет условием того, отображается ли всплывающее окно или нет. В этом случае, если нет значения, компонент ничего не будет отображать, однако я бы посоветовал проявить творческий подход и добавить дополнительную опору или имя класса (в зависимости от вашего вкуса стиля), чтобы всплывающее окно исчезло или появилось.
Запуск всплывающего окна
Теперь, когда у нас есть всплывающее окно, которое может появляться всякий раз, когда мы хотим, все, что нам нужно сделать, это заставить его появиться.
На самом деле это так же просто, как получить функцию triggerPopup из нашего отличного хука и вызвать ее с текстом, который мы хотим отобразить. Пока это используется в любом компоненте в поставщике контекста, это может работать как события onClick, в функциях обратного вызова или почти везде, где вам это нужно.
Использование всплывающего окна
Я бы посоветовал использовать PopupProvider в самой высокой точке дерева компонентов, чтобы убедиться, что он обертывает все ваше приложение, чтобы иметь возможность использовать функцию triggerPopup где угодно. Всплывающее окно также может располагаться в любом месте приложения, если оно находится внутри провайдера.
