@wordpress/components

最后更新：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>;
}

弹出框

默认情况下，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 做出贡献的更多信息，请阅读项目的主要贡献者指南。

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