组件参考

最后更新：2026-10-17 10:55:29

此软件包包含一组通用的 WordPress 组件库，用于创建 WordPress 仪表板中屏幕和功能之间共享的常见 UI 元素。

安装

npm install @wordpress/components --save

本软件包假设您的代码将在ES2015+环境中运行。如果您使用的环境对这些语言特性和 API 的支持有限或完全不支持，则应在代码中包含@wordpress/babel-preset-default随附的 polyfill。

设置

许多组件需要加载软件包的 CSS 样式表。

在 WordPress 内部

为确保正确的加载顺序，请将 wp-components 样式表添加为插件样式表的依赖项。有关如何指定依赖项的信息，请参阅 wp_enqueue_style 文档。

在 WordPress 外部

在您的应用程序中加载样式表：

import '@wordpress/components/build-style/style.css';

样式表的 RTL（从右到左）版本位于 @wordpress/components/build-style/style-rtl.css。

用法

在 Gutenberg 中，可以通过从 components 根目录导入来访问这些组件：

import { Button } from '@wordpress/components';

export default function MyButton() {
    return <Button>Click Me!</Button>;
}

弹出框 (Popovers)

默认情况下，Popover 组件将渲染在一个附加到文档主体的额外元素内。

如果您想精确控制弹出框的渲染位置，则需要使用 Popover.Slot 组件。

以下示例说明了如何使用
Popover 包装组件，并使这些弹出框渲染到 DOM 中的单个位置。

import { Popover, SlotFillProvider } from '@wordpress/components';
import { MyComponentWithPopover } from './my-component';

const Example = () => {
    <SlotFillProvider>
        <MyComponentWithPopover />
        <Popover.Slot />
    </SlotFillProvider>;
};

TypeScript

该软件包为其导出的组件暴露了自己的类型，但它没有为组件 props 导出自己的类型。如果需要提取 props 类型，请使用 React.ComponentProps 从元素中获取类型。

import type { ComponentProps } from 'react';
import { Button } from '@wordpress/components';

export default function MyButton( props: ComponentProps< typeof Button > ) {
    return <Button { ...props }>Click Me!</Button>;
}

文档和示例

您可以在 https://wordpress.github.io/gutenberg/ 浏览组件文档和示例。

为此软件包做出贡献

这是 Gutenberg 项目的一部分，是一个独立的软件包。该项目组织为一个 monorepo。它由多个自包含的软件包组成，每个软件包都有特定的用途。此 monorepo 中的软件包发布到 npm，并被 WordPress 以及其他软件项目使用。

要了解有关为此软件包或整个 Gutenberg 做出贡献的更多信息，请阅读项目的主要贡献者指南。

此软件包也有自己的贡献信息，您可以在其中找到更多详细信息。