Компонент withNotices — это высокоуровневый компонент (Higher-Order Component) в WordPress, предназначенный для добавления возможности отображения уведомлений внутри обернутого компонента. Он часто используется в интерфейсах, где необходимо выводить сообщения об ошибках, предупреждениях или успешных действиях.
Основные свойства withNotices
Оборачивая компонент с помощью withNotices, мы добавляем к нему следующие свойства:
- noticeOperations — объект, содержащий функции для управления уведомлениями, такие как добавление и удаление уведомлений.
- noticeUI — элемент интерфейса, который отображает список уведомлений.
- noticeList — массив объектов уведомлений, доступный для прямой обработки и отображения.
Основные функции noticeOperations
- createNotice: Добавляет новое уведомление.
- Параметры:
notice(объект) — объект с параметрами уведомления.
- Параметры:
- createErrorNotice: Добавляет уведомление об ошибке.
- Параметры:
msg(строка) — текст сообщения об ошибке.
- Параметры:
- removeAllNotices: Удаляет все уведомления.
- removeNotice: Удаляет уведомление по ID.
- Параметры:
id(строка) — ID уведомления, которое нужно удалить.
- Параметры:
Пример 1: Добавление уведомления об ошибке
В этом примере создадим компонент, который позволяет добавлять уведомление об ошибке при нажатии кнопки.
Шаг 1: Импорт необходимых компонентов
import { withNotices, Button } from '@wordpress/components';
Шаг 2: Создаем компонент с уведомлением об ошибке
Используем функцию createErrorNotice для добавления уведомления с сообщением об ошибке.
const MyComponentWithErrorNotice = withNotices(({ noticeOperations, noticeUI }) => {
const showErrorNotice = () => noticeOperations.createErrorNotice('Произошла ошибка!');
return (
<div>
{noticeUI}
<Button variant="secondary" onClick={showErrorNotice}>
Показать ошибку
</Button>
</div>
);
});
Пример 2: Добавление и удаление пользовательских уведомлений
В этом примере создадим компонент, который позволяет добавлять кастомные уведомления и удалять их по ID.
Шаг 1: Определяем компонент с пользовательскими уведомлениями
Этот компонент позволяет добавлять уведомление с произвольным текстом и удалять уведомления по их ID.
const MyComponentWithCustomNotices = withNotices(({ noticeOperations, noticeUI }) => {
const addCustomNotice = () => {
noticeOperations.createNotice({
status: 'success',
content: 'Успешное действие выполнено!',
isDismissible: true,
});
};
const removeAllCustomNotices = () => {
noticeOperations.removeAllNotices();
};
return (
<div>
{noticeUI}
<Button variant="secondary" onClick={addCustomNotice}>
Добавить уведомление
</Button>
<Button variant="secondary" onClick={removeAllCustomNotices}>
Удалить все уведомления
</Button>
</div>
);
});
Пример 3: Использование noticeList для отображения уведомлений в кастомном формате
Вы также можете использовать свойство noticeList, чтобы отображать уведомления в собственном формате.
const MyComponentWithNoticeList = withNotices(({ noticeOperations, noticeList }) => {
const addInfoNotice = () => {
noticeOperations.createNotice({
status: 'info',
content: 'Это информационное уведомление',
isDismissible: true,
});
};
return (
<div>
<Button variant="secondary" onClick={addInfoNotice}>
Добавить информационное уведомление
</Button>
<div className="custom-notice-list">
{noticeList.map((notice) => (
<div key={notice.id} className={`custom-notice custom-notice-${notice.status}`}>
<span>{notice.content}</span>
<Button
variant="link"
onClick={() => noticeOperations.removeNotice(notice.id)}
>
Удалить
</Button>
</div>
))}
</div>
</div>
);
});
Заключение
withNotices — мощный компонент для управления уведомлениями в WordPress. Он предоставляет удобный интерфейс для добавления, удаления и отображения уведомлений, что делает его отличным выбором для создания отзывчивых и доступных интерфейсов.