云策 WordPress 开发者社区

块编辑器开发文档

Item

查看官方原文 ↗
💡 云策文档标注

概述

Item 是一个实验性 WordPress 组件，用于与 ItemGroup 结合显示分组和样式化的项目列表。它通过 Context 从父组件 ItemGroup 接收属性，如 size。

关键要点

  • Item 是实验性组件，可能发生重大变更，需谨慎使用。
  • 必须与 ItemGroup 组件配合使用，以创建分组列表。
  • 支持 onClick 事件处理程序，当定义时渲染为按钮（除非通过 as prop 指定）。
  • size prop 控制内边距，可选 'small'、'medium'、'large'，默认 'medium'。
  • 通过 Context 从 ItemGroup 继承 size 属性，实现统一样式。

代码示例

import {
    __experimentalItemGroup as ItemGroup,
    __experimentalItem as Item,
} from '@wordpress/components';

function Example() {
    return (
        <ItemGroup>
            <Item>Code</Item>
            <Item>is</Item>
            <Item>Poetry</Item>
        </ItemGroup>
    );
}

注意事项

由于是实验性功能，开发者应关注未来版本更新，避免在生产环境中依赖不稳定 API。

📄 原文内容
This feature is still experimental. “Experimental” means this is an early implementation subject to drastic and breaking changes.

Item is used in combination with ItemGroup to display a list of items grouped and styled together.

Usage

Item should be used in combination with the ItemGroup component.

import {
    __experimentalItemGroup as ItemGroup,
    __experimentalItem as Item,
} from '@wordpress/components';

function Example() {
    return (
        <ItemGroup>
            <Item>Code</Item>
            <Item>is</Item>
            <Item>Poetry</Item>
        </ItemGroup>
    );
}

Props

onClick: React.MouseEventHandler<HTMLDivElement>

Even handler for processing click events. When defined, the Item component will render as a button (unless differently specified via the as prop).

  • Required: No

size: 'small' | 'medium' | 'large'

Determines the amount of padding within the component.

  • Required: No
  • Default: medium

Context

Item is connected to the <ItemGroup /> parent component using Context. Therefore, Item receives the size prop from the ItemGroup parent component.

In the following example, the <Item /> will render with a size of small:

import {
    __experimentalItemGroup as ItemGroup,
    __experimentalItem as Item,
} from '@wordpress/components';

const Example = () => (
    <ItemGroup size="small">
        <Item>...</Item>
    </ItemGroup>
);