SlotFill

使用法

アプリケーションのルートで、SlotとFillのレンダリングを調整するSlotFillProviderをレンダリングする必要があります。

次に、アプリケーションの任意の場所にSlotコンポーネントをレンダリングし、名前を付けます。

どのFillも、アプリケーション内の他の場所でレンダリングされていても、このSlotスペースを自動的に占有します。

Fillコンポーネントを直接使用するか、以下の例のようにスロット名を消費者の認識から抽象化するラッパーコンポーネントタイプを使用できます。

import {
   SlotFillProvider,
   Slot,
   Fill,
   Panel,
   PanelBody,
} from '@wordpress/components';
const MySlotFillProvider = () => {
   const MyPanelSlot = () => (
   <Panel header="Panel with slot">
   <PanelBody>
   <Slot name="MyPanelSlot" />
   </PanelBody>
   </Panel>
   );
   MyPanelSlot.Content = () => <Fill name="MyPanelSlot">Panel body</Fill>;
   return (
   <SlotFillProvider>
   <MyPanelSlot />
   <MyPanelSlot.Content />
   </SlotFillProvider>
   );
};

対応するSlotおよびFillコンポーネントを一致させるプロセスを簡素化するために作成されたcreateSlotFillヘルパーメソッドもあります:

const { Fill, Slot } = createSlotFill( 'Toolbar' );
const ToolbarItem = () => <Fill>My item</Fill>;
const Toolbar = () => (
   <div className="toolbar">
   <Slot />
   </div>
);

プロパティ

`````Slot`````および`````Fill`````は、`````name`````文字列プロパティを受け入れ、指定された`````name`````を持つ`````Slot`````が、関連する`````Fill`````の`````children`````をレンダリングします。  
`````Slot`````は、イベントバブリングの動作を変更する`````bubblesVirtually`````プロパティを受け入れます:  
- デフォルトでは、イベントはDOM階層の親にバブリングします（ネイティブイベントバブリング）  
- `````bubblesVirtually`````がtrueに設定されている場合、イベントはReact要素階層内の仮想親にバブリングします。
`````Slot`````は、`````bubblesVirtually`````がtrueに設定されている場合、スロットコンテナに追加するためのオプションの`````className`````および`````style`````プロパティも受け入れます。  
`````Slot````` **なし**の`````bubblesVirtually`````は、`````fills`````をパラメータとして受け取るオプションの`````children`````関数プロパティを受け入れます。これにより、追加の処理を行い、`````fills`````を条件付きでラップできます。  
*例*:  
``````bash
const Toolbar = ( { isMobile } ) => (
   <div className="toolbar">
   <Slot name="Toolbar">
   { ( fills ) => {
   return isMobile && fills.length > 3 ? (
   <div className="toolbar__mobile-long">{ fills }</div>
   ) : (
   fills
   );
   } }
   </Slot>
   </div>
);
`

プロパティは、SlotからFillにfillPropsプロパティを使用して渡すこともできます:

const { Fill, Slot } = createSlotFill( 'Toolbar' );
const ToolbarItem = () => (
   <Fill>
   { ( { hideToolbar } ) => {
   <Button onClick={ hideToolbar }>Hide</Button>;
   } }
   </Fill>
);
const Toolbar = () => {
   const hideToolbar = () => {
   console.log( 'Hide toolbar' );
   };
   return (
   <div className="toolbar">
   <Slot fillProps={ { hideToolbar } } />
   </div>
   );
};