gutenbergdocs/docs/reference-guides/data/data-core-notices.md

removeNotices

返回一个用于指示需要移除多个通知的动作对象。

用法

import { __ } from '@wordpress/i18n';
import { useDispatch, useSelect } from '@wordpress/data';
import { store as noticesStore } from '@wordpress/notices';
import { Button } from '@wordpress/components';

const ExampleComponent = () => {
	const notices = useSelect( ( select ) =>
		select( noticesStore ).getNotices()
	);
	const { removeNotices } = useDispatch( noticesStore );
	return (
		<>
			<ul>
				{ notices.map( ( notice ) => (
					<li key={ notice.id }>{ notice.content }</li>
				) ) }
			</ul>
			<Button
				onClick={ () =>
					removeNotices( notices.map( ( { id } ) => id ) )
				}
			>
				{ __( '清除所有通知' ) }
			</Button>
		</>
	);
};

参数

• ids string[]: 唯一通知标识符列表。
• context [string]: 可选参数，指定通知显示的情境（分组）。默认为默认情境。

返回值

• Object: 动作对象。

createSuccessNotice

返回用于指示创建成功通知的操作对象。有关选项说明，请参阅 createNotice。

相关

• createNotice

用法

import { __ } from '@wordpress/i18n';
import { useDispatch } from '@wordpress/data';
import { store as noticesStore } from '@wordpress/notices';
import { Button } from '@wordpress/components';

const ExampleComponent = () => {
	const { createSuccessNotice } = useDispatch( noticesStore );
	return (
		<Button
			onClick={ () =>
				createSuccessNotice( __( 'Success!' ), {
					type: 'snackbar',
					icon: '🔥',
				} )
			}
		>
			{ __( 'Generate a snackbar success notice!' ) }
		</Button>
	);
};

参数

• content string: 通知消息。
• options [Object]: 可选的通知选项。

返回值

• Object: 操作对象。

createWarningNotice

返回用于指示创建警告通知的操作对象。有关选项说明，请参阅 createNotice。

相关

• createNotice

用法

import { __ } from '@wordpress/i18n';
import { useDispatch } from '@wordpress/data';
import { store as noticesStore } from '@wordpress/notices';
import { Button } from '@wordpress/components';

const ExampleComponent = () => {
	const { createWarningNotice, createInfoNotice } =
		useDispatch( noticesStore );
	return (
		<Button
			onClick={ () =>
				createWarningNotice( __( 'Warning!' ), {
					onDismiss: () => {
						createInfoNotice(
							__( 'The warning has been dismissed!' )
						);
					},
				} )
			}
		>
			{ __( 'Generates a warning notice with onDismiss callback' ) }
		</Button>
	);
};

参数

• content string: 通知消息。
• options [Object]: 可选的通知选项。

返回值

• Object: 操作对象。

removeAllNotices

从给定上下文中移除所有通知。默认为默认上下文。

用法

import { __ } from '@wordpress/i18n';
import { useDispatch, useSelect } from '@wordpress/data';
import { store as noticesStore } from '@wordpress/notices';
import { Button } from '@wordpress/components';

export const ExampleComponent = () => {
	const notices = useSelect( ( select ) =>
		select( noticesStore ).getNotices()
	);
	const { removeAllNotices } = useDispatch( noticesStore );
	return (
		<>
			<ul>
				{ notices.map( ( notice ) => (
					<li key={ notice.id }>{ notice.content }</li>
				) ) }
			</ul>
			<Button onClick={ () => removeAllNotices() }>
				{ __( 'Clear all notices', 'woo-gutenberg-products-block' ) }
			</Button>
			<Button onClick={ () => removeAllNotices( 'snackbar' ) }>
				{ __(
					'Clear all snackbar notices',
					'woo-gutenberg-products-block'
				) }
			</Button>
		</>
	);
};

参数

• noticeType string: 要移除所有通知的上下文。
• context string: 要移除所有通知的上下文。

返回值

• Object: 操作对象。

removeNotice

返回用于指示移除通知的操作对象。

用法

import { __ } from '@wordpress/i18n';
import { useDispatch } from '@wordpress/data';
import { store as noticesStore } from '@wordpress/notices';
import { Button } from '@wordpress/components';

const ExampleComponent = () => {
	const notices = useSelect( ( select ) =>
		select( noticesStore ).getNotices()
	);
	const { createWarningNotice, removeNotice } = useDispatch( noticesStore );

	return (
		<>
			<Button
				onClick={ () =>
					createWarningNotice( __( 'Warning!' ), {
						isDismissible: false,
					} )
				}
			>
				{ __( 'Generate a notice' ) }
			</Button>
			{ notices.length > 0 && (
				<Button onClick={ () => removeNotice( notices[ 0 ].id ) }>
					{ __( 'Remove the notice' ) }
				</Button>
			) }
		</>
	);
};

参数

• id string: 通知的唯一标识符。
• context [string]: 通知出现的可选上下文（分组）。默认为默认上下文。

返回值

• Object: 操作对象。

通知数据

命名空间：core/notices

选择器

getNotices

以数组形式返回所有通知，可选择指定上下文。默认为全局上下文。

用法

import { useSelect } from '@wordpress/data';
import { store as noticesStore } from '@wordpress/notices';

const ExampleComponent = () => {
	const notices = useSelect( ( select ) =>
		select( noticesStore ).getNotices()
	);
	return (
		<ul>
			{ notices.map( ( notice ) => (
				<li key={ notice.ID }>{ notice.content }</li>
			) ) }
		</ul>
	);
};

参数

• state Object: 通知状态
• context ?string: 可选的分组上下文

返回值

• WPNotice[]: 通知数组

操作

createErrorNotice

返回用于指示创建错误通知的操作对象。选项文档请参考 createNotice。

相关

• createNotice

用法

import { __ } from '@wordpress/i18n';
import { useDispatch } from '@wordpress/data';
import { store as noticesStore } from '@wordpress/notices';
import { Button } from '@wordpress/components';

const ExampleComponent = () => {
	const { createErrorNotice } = useDispatch( noticesStore );
	return (
		<Button
			onClick={ () =>
				createErrorNotice( __( '发生错误！' ), {
					type: 'snackbar',
					explicitDismiss: true,
				} )
			}
		>
			{ __(
				'生成带有显式关闭按钮的snackbar错误通知'
			) }
		</Button>
	);
};

参数

• content string: 通知消息
• options [Object]: 可选的通知选项

返回值

• Object: 操作对象

createInfoNotice

返回用于指示创建信息通知的操作对象。选项文档请参考 createNotice。

相关

• createNotice

用法

import { __ } from '@wordpress/i18n';
import { useDispatch } from '@wordpress/data';
import { store as noticesStore } from '@wordpress/notices';
import { Button } from '@wordpress/components';

const ExampleComponent = () => {
	const { createInfoNotice } = useDispatch( noticesStore );
	return (
		<Button
			onClick={ () =>
				createInfoNotice( __( '有情况发生！' ), {
					isDismissible: false,
				} )
			}
		>
			{ __( '生成一个不可关闭的通知' ) }
		</Button>
	);
};

参数

• content string: 通知消息
• options [Object]: 可选的通知选项

返回值

• Object: 操作对象

createNotice

返回用于指示创建通知的操作对象。

用法

import { __ } from '@wordpress/i18n';
import { useDispatch } from '@wordpress/data';
import { store as noticesStore } from '@wordpress/notices';
import { Button } from '@wordpress/components';

const ExampleComponent = () => {
	const { createNotice } = useDispatch( noticesStore );
	return (
		<Button
			onClick={ () => createNotice( 'success', __( '通知消息' ) ) }
		>
			{ __( '生成成功通知！' ) }
		</Button>
	);
};

参数

• status string|undefined: 通知状态（如果传入undefined则为"info"）
• content string: 通知消息
• options [Object]: 通知选项
• options.context [string]: 通知分组上下文
• options.id [string]: 通知标识符。未指定时自动分配
• options.isDismissible [boolean]: 用户是否可关闭通知
• options.type [string]: 通知类型，可选 default 或 snackbar
• options.speak [boolean]: 是否向屏幕阅读器播报通知内容
• options.actions [Array<WPNoticeAction>]: 与通知一起显示的用户操作
• options.icon [string]: 通知显示的图标。仅当类型设置为 snackbar 时使用
• options.explicitDismiss [boolean]: 通知是否包含显式关闭按钮且不能通过点击通知主体关闭。仅当类型设置为 snackbar 时适用
• options.onDismiss [Function]: 通知关闭时调用的函数

返回值

• Object: 操作对象