woocommerce/packages/js/components/zh-cn

组件

此软件包包含一个组件库，可用于在 WooCommerce 仪表板和报告页面中创建页面。

安装

安装模块

pnpm install @woocommerce/components --save

使用

/**
 * WooCommerce 依赖项
 */
import { Card } from '@woocommerce/components';

export default function MyCard() {
  return (
    <Card title="商店性能" description="关键性能指标">
      <p>您的内容放在卡片中。</p>
    </Card>
  );
}

许多组件包含用于添加样式的 CSS，您需要按顺序添加才能正确显示。在 WooCommerce 中，将 wc-components 样式表添加为插件样式表的依赖项。有关如何指定依赖项，请参阅 wp_enqueue_style 文档。

在非 WordPress 项目中，直接链接到 build-style/card/style.css 文件，该文件位于 node_modules/@woocommerce/components/build-style/<组件名称>/style.css。

测试使用

如果您在使用了 Jest 进行测试的项目中使用这些组件，可能会遇到如下错误：

Cannot find module '@woocommerce/settings' from 'node_modules/@woocommerce/experimental/node_modules/@woocommerce/navigation/build/index.js'

要解决此问题，您需要模拟 @woocommerce/settings，因为它是一个指向 window.wcSettings 的别名，而 window.wcSettings 又来自 WC Blocks 包并受其维护，其前端代码位于此处。

可以通过将以下内容添加到 Jest 配置中来实现：

module.exports = {
  moduleNameMapper: {
    '@woocommerce/settings': path.resolve(
      __dirname,
      './mock/woocommerce-settings'
    ),
  }
  setupFiles: [
    path.resolve( __dirname, 'build/setup-globals.js' ),
  ],
  // ...其他配置
}

然后，您需要创建以下文件：

1. 在 ./mock 目录中创建一个名为 woocommerce-settings.js 的新文件。您可以在此处找到此文件的内容。
2. 接下来，创建一个名为 setup-globals.js 的文件。您可以在此处找到此文件的内容。此文件的目的是模拟 wcSettings 全局变量。