通知数据-WordPress区块编辑器手册-果果开发

命名空间：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 Record< string, Array< Notice > >：通知状态。
context string：可选的分组上下文。

通知数组。

动作

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( __( 'An error occurred!' ), {
                    type: 'snackbar',
                    explicitDismiss: true,
                } )
            }
        >
            { __(
                'Generate a snackbar error notice with explicit dismiss button.'
            ) }
        </Button>
    );
};

参数

content string：通知消息。
options NoticeOptions：可选的通知选项。

动作对象。

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( __( 'Something happened!' ), {
                    isDismissible: false,
                } )
            }
        >
            { __( 'Generate a notice that cannot be dismissed.' ) }
        </Button>
    );
};

参数

content string：通知消息。
options NoticeOptions：可选的通知选项。

动作对象。

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', __( 'Notice message' ) ) }
        >
            { __( 'Generate a success notice!' ) }
        </Button>
    );
};

参数

status 通知状态（如果传入 undefined 则为 “info”）。
content string：通知消息。
options NoticeOptions：可选的通知选项。

Extract< ReducerAction, { type: 'CREATE_NOTICE'; } >：动作对象。

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 NoticeOptions：可选的通知选项。

动作对象。

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 NoticeOptions：可选的通知选项。

动作对象。

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 要从中移除所有通知的上下文。
context string：要从中移除所有通知的可选上下文。

Extract< ReducerAction, { type: 'REMOVE_ALL_NOTICES'; } >：动作对象。

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：通知预期出现的可选上下文（分组）。默认为 ‘default’ 上下文。

Extract< ReducerAction, { type: 'REMOVE_NOTICE'; } >：动作对象。

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 ) )
                }
            >
                { __( 'Clear all notices' ) }
            </Button>
        </>
    );
};

参数

ids Array< string >: 唯一通知标识符的列表。
context string: 可选的上下文（分组），通知预期显示在该上下文中。默认为 'default' 上下文。

Extract< ReducerAction, { type: 'REMOVE_NOTICES'; } >: 动作对象。