Message

Компонент Message библиотеки Ant Design предназначен для отображения глобальных уведомлений поверх пользовательского интерфейса. Он позволяет информировать пользователей о результатах действий, предупреждать об ошибках или демонстрировать статус процессов без необходимости добавления дополнительных элементов в разметку страницы.

Основные возможности

  1. Типы сообщений Message поддерживает несколько стандартных типов, каждый из которых отображается с уникальным визуальным стилем:

    • success — успешное выполнение действия
    • error — ошибка
    • info — информационное уведомление
    • warning — предупреждение
    • loading — индикатор выполнения процесса

  2. Автоматическое закрытие Все сообщения по умолчанию исчезают через определённое время. Время отображения можно регулировать с помощью свойства duration (в секундах). Значение 0 отключает автоматическое закрытие.

  3. Глобальный и локальный вызов Message реализуется как глобальный объект, что позволяет вызывать уведомления из любой части приложения, не привязываясь к конкретной компоненте.

Импорт и базовое использование

Для начала работы необходимо импортировать объект message:

import { message } from 'antd';

Простейший пример отображения сообщения:

message.success('Операция выполнена успешно!');
message.error('Произошла ошибка при сохранении данных.');
message.info('Информация о текущем статусе.');
message.warning('Внимание! Проверка данных необходима.');

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

Настройка времени отображения

По умолчанию сообщения закрываются через 3 секунды. Время можно изменять:

message.success('Данные успешно загружены', 5); // Появится на 5 секунд

Также можно глобально настроить поведение всех сообщений:

message.config({
  duration: 4.5,
  maxCount: 3, // Максимальное количество одновременно отображаемых сообщений
  rtl: false,  // Поддержка отображения справа налево
});

Последовательность и ограничение количества сообщений

Для предотвращения засорения интерфейса одновременно отображается ограниченное количество сообщений, контролируемое параметром maxCount. Если количество сообщений превышает этот лимит, старые сообщения автоматически закрываются.

message.config({ maxCount: 2 });
message.info('Первое сообщение');
message.info('Второе сообщение');
message.info('Третье сообщение'); // Первое сообщение автоматически закроется

Работа с промисами и асинхронными действиями

Message предоставляет метод loading, который можно использовать для индикации длительных процессов, а затем обновлять состояние:

const hide = message.loading('Загрузка данных...', 0); // duration=0, чтобы не закрывалось автоматически

fetch('/api/data')
  .then(() => {
    hide(); // скрыть индикатор загрузки
    message.success('Данные успешно загружены!');
  })
  .catch(() => {
    hide();
    message.error('Ошибка при загрузке данных');
  });

Использование функции loading с возвратом Promise упрощает цепочку уведомлений для асинхронных операций.

Кастомизация контента

Message позволяет вставлять JSX-контент для сложных уведомлений:

message.info(
  <span>
    Обновление прошло успешно. <a href="/details">Посмотреть детали</a>
  </span>,
  5
);

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

Управление видимостью

Методы для управления состоянием сообщений:

  • message.open({ type, content, duration }) — универсальный метод для создания сообщений любого типа с расширенными настройками.
  • message.destroy() — закрывает все активные сообщения мгновенно.

Пример использования open:

message.open({
  type: 'success',
  content: 'Данные успешно сохранены!',
  duration: 2,
  onClose: () => console.log('Сообщение закрыто')
});

Интеграция с компонентами форм и кнопок

Message часто используется совместно с Form и Button для уведомления пользователя о результатах отправки форм:

const onFin ish = (values) => {
  message.loading({ content: 'Отправка данных...', key: 'form' });
  
  submitForm(values).then(() => {
    message.success({ content: 'Форма успешно отправлена!', key: 'form', duration: 2 });
  }).catch(() => {
    message.error({ content: 'Ошибка при отправке формы', key: 'form', duration: 2 });
  });
};

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

Рекомендации по использованию

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

Message в Ant Design — мощный инструмент для коммуникации с пользователем, который сочетает простоту вызова с гибкой настройкой отображения и поведения уведомлений.

Оглавление