# Slot 和 Fill

## 问题

您向 [Store API](https://github.com/woocommerce/woocommerce/blob/trunk/plugins/woocommerce/client/blocks/docs/third-party-developers/extensibility/rest-api/extend-rest-api-add-data.md) 添加了自定义数据。您使用 [结账过滤器](/docs/block-development/extensible-blocks/cart-and-checkout-blocks/filters-in-cart-and-checkout) 修改了多个字符串。现在，您想在购物车和结账的特定位置渲染您自己的组件。

## 解决方案

Slot 和 Fill 是两个组件，它们提供了在购物车和结账的预定义位置渲染您自己的 HTML 的可能性。您的组件将访问上下文数据，并在需要时自动重新渲染。

_Slot_ 是购物车和结账中可以渲染无限数量的外部组件的位置。

_Fill_ 是第三方开发者提供的组件，用于在 _Slot_ 中渲染。

Slot 和 Fill 使用 WordPress 的 API，您可以在 [Slot 和 Fill 文档](https://github.com/WordPress/gutenberg/tree/trunk/packages/components/src/slot-fill) 中了解更多关于它们的工作原理。

## 基本用法

`ExperimentalOrderMeta` 是一个 Fill 组件，它将在购物车和结账块中的“订单摘要”部分下方渲染。
`ExperimentalOrderMeta` 会自动将 props 传递给其顶层子组件：

-   `cart`，包含购物车数据
-   `extensions`，包含在 `wc/store/cart` 端点中通过 `ExtendSchema::class` 注册的数据
-   `context`，等于 Fill 组件所在的 Block 的名称：`woocommerce/cart` 或 `woocommerce/checkout`

```jsx
const { registerPlugin } = wp.plugins;
const { ExperimentalOrderMeta } = wc.blocksCheckout;

const MyCustomComponent = ( { cart, extensions } ) => {
	return <div className="my-component">Hello WooCommerce</div>;
};

const render = () => {
	return (
		<ExperimentalOrderMeta>
			<MyCustomComponent />
		</ExperimentalOrderMeta>
	);
};

registerPlugin( 'my-plugin-namespace', {
	render,
	scope: 'woocommerce-checkout',
} );
```

## registerPlugin

在上面的示例中，我们正在使用 `registerPlugin`。这个插件将接收我们的组件并渲染它，但它不会使其可见。SlotFill 部分负责实际将其显示在正确的位置。

您使用 `registerPlugin` 来提供您的插件命名空间、您的组件 `render` 以及您的 `registerPlugin` 的作用域。作用域的值始终应该是 `woocommerce-checkout`。

## 需求

要使此功能正常工作，您的脚本必须在购物车和结账之后被加载。您可以参考 [集成界面](https://github.com/woocommerce/woocommerce-gutenberg-products-block/blob/50f9b3e8d012f425d318908cc13d9c601d97bd68/docs/extensibility/integration-interface.md) 文档来了解如何加载您的脚本。