WithFilters

使用法

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 );