使用过滤器

withFilters 是 Native Gutenberg Extensibility 的一部分。它也是一个 React 高阶组件。

用法

import { withFilters } from '@wordpress/components';
import { addFilter } from '@wordpress/hooks';

const MyComponent = ( { title } ) => <h1>{ title }</h1>;

const ComponentToAppend = () => <div>Appended component</div>;

function withComponentAppended( FilteredComponent ) {
    return ( props ) => (
        <>
            <FilteredComponent { ...props } />
            <ComponentToAppend />
        </>
    );
}

addFilter(
    'MyHookName',
    'my-plugin/with-component-appended',
    withComponentAppended
);

const MyComponentWithFilters = withFilters( 'MyHookName' )( MyComponent );

withFilters 需要一个提供钩子名称的字符串参数。它返回一个函数，可用于组合你的组件。该钩子名称允许插件开发者使用 wp.hooks.addFilter 方法自定义或完全覆盖传递给此高阶组件的组件。

也可以通过实现如下工作的高阶组件来覆盖属性：

import { withFilters } from '@wordpress/components';
import { addFilter } from '@wordpress/hooks';

const MyComponent = ( { hint, title } ) => (
    <>
        <h1>{ title }</h1>
        <p>{ hint }</p>
    </>
);

function withHintOverridden( FilteredComponent ) {
    return ( props ) => (
        <FilteredComponent { ...props } hint="Overridden hint" />
    );
}

addFilter( 'MyHookName', 'my-plugin/with-hint-overridden', withHintOverridden );

const MyComponentWithFilters = withFilters( 'MyHookName' )( MyComponent );