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

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

Мы продолжим, как показано ниже:
1. Создание нового приложения для реагирования.
2. Создание и проектирование нашего компонента Snackbar.
3. Кнопка для запуска события для отображения Snackbar.

Создание нового приложения для реагирования

Давайте создадим новый проект React по имени Snackbar, используя следующую команду:

npx create-react-app snackbar

Давайте запустим созданное приложение с помощью npm start, откроем браузер и перейдем по адресу http: // localhost: 3000. Вы увидите приложение React по умолчанию.

Теперь давайте перейдем к тому, чтобы запачкать руки, создав компонент закусочной.

Создание и проектирование нашего компонента Snackbar

Откройте только что созданный проект закусочной в любой из ваших любимых IDE. В моем случае это код Visual Studio.
Внутри вашего проекта перейдите в папку src и создайте в ней два файла: snackbar.js и snackbar.module.css.

Сначала давайте быстро напишем css для снекбара в snackbar.module.css. module.css относится к модулю css, что означает, что все классы и анимации css имеют локальную область видимости. Вы можете узнать больше об этом на странице https://facebook.github.io/create-react-app/docs/adding-a-css-modules-stylesheet.

Возвращаясь к части разработки, ниже приведен фрагмент кода для нее.

  • .snackbar - это основной класс CSS для нашей Snackbar, который изначально скрыт.
  • Класс .snackbar.show делает Snackbar видимым с эффектом постепенного появления и исчезновения.

Теперь давайте создадим компонент закусочной.
Ниже приведен его фрагмент кода.

Этот компонент состоит из трех основных частей.

  • isActive: состояние, которое контролирует видимость Snackbars. Если это правда, то компонент имеет css-класс .snackbar.show, который делает его видимым с эффектом постепенного появления и исчезновения, а когда isActive имеет значение false, компонент имеет класс .snackbar css, который делает компонент невидимым или скрытым.
  • openSnackbar: это функция, которая контролирует состояние isActive. Когда эта функция выполняется, isActive становится истинным, что делает Snackbar видимым с интервалом времени 3 секунды, после чего isActive становится ложным. Функция openSnackbar также устанавливает сообщение, которое будет отображаться в Snackbar.
  • message: это сообщение, которое будет отображаться на панели закусок.

Вам может быть интересно, почему сообщение не является состоянием. Ответ прост, потому что мы не хотим, чтобы наш компонент Snackbar повторно отображался при изменении сообщения, а при изменении isActive.

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

Теперь для простой демонстрации давайте сделаем кнопку, чтобы выполнить это.

Кнопка для запуска события для отображения Snackbar

Чтобы упростить задачу, я добавил кнопку в файл App.js, как показано ниже:

Как видите, я импортировал компонент Snackbar и поместил его в любом месте внутри return. Итак, наша следующая цель - выполнить функцию openSnackbar компонента Snackbar. Для этого мы будем использовать ссылки. Мы создадим ссылку, используя snackbarRef = React.createRef(), и передадим created snackbarRef в Snackbar ref как <Snackbar ref = {this.snackbarRef} />
Вы можете видеть, что я создал простую кнопку и запустил openSnackbar при нажатии на нее. Вы можете добавить собственное сообщение или сообщение об ошибке или что угодно. В этом случае при нажатии кнопки это будет выглядеть, как показано ниже,

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

Это ссылка на репозиторий Snackbar на github https://github.com/Kroniac/react_snackbar

Дайте мне знать, было ли это руководство полезным для вас, ребята, и в каком случае вы его использовали.