64 lines
No EOL
2.5 KiB
Markdown
64 lines
No EOL
2.5 KiB
Markdown
# 组件
|
||
|
||
此软件包包含一个组件库，可用于在 WooCommerce 仪表板和报告页面中创建页面。
|
||
|
||
## 安装
|
||
|
||
安装模块
|
||
|
||
```bash
|
||
pnpm install @woocommerce/components --save
|
||
```
|
||
|
||
## 使用
|
||
|
||
```jsx
|
||
/**
|
||
* WooCommerce 依赖项
|
||
*/
|
||
import { Card } from '@woocommerce/components';
|
||
|
||
export default function MyCard() {
|
||
return (
|
||
<Card title="商店性能" description="关键性能指标">
|
||
<p>您的内容放在卡片中。</p>
|
||
</Card>
|
||
);
|
||
}
|
||
```
|
||
|
||
许多组件包含用于添加样式的 CSS，您需要按顺序添加才能正确显示。在 WooCommerce 中，将 `wc-components` 样式表添加为插件样式表的依赖项。有关如何指定依赖项，请参阅 [wp_enqueue_style 文档](https://developer.wordpress.org/reference/functions/wp_enqueue_style/#parameters)。
|
||
|
||
在非 WordPress 项目中，直接链接到 `build-style/card/style.css` 文件，该文件位于 `node_modules/@woocommerce/components/build-style/<组件名称>/style.css`。
|
||
|
||
## 测试使用
|
||
|
||
如果您在使用了 Jest 进行测试的项目中使用这些组件，可能会遇到如下错误：
|
||
|
||
```bash
|
||
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](https://github.com/woocommerce/woocommerce-blocks) 包并受其维护，其前端代码位于[此处](https://github.com/woocommerce/woocommerce-gutenberg-products-block/tree/trunk/assets/js/settings/shared)。
|
||
|
||
可以通过将以下内容添加到 Jest 配置中来实现：
|
||
|
||
```js
|
||
module.exports = {
|
||
moduleNameMapper: {
|
||
'@woocommerce/settings': path.resolve(
|
||
__dirname,
|
||
'./mock/woocommerce-settings'
|
||
),
|
||
}
|
||
setupFiles: [
|
||
path.resolve( __dirname, 'build/setup-globals.js' ),
|
||
],
|
||
// ...其他配置
|
||
}
|
||
```
|
||
|
||
然后，您需要创建以下文件：
|
||
|
||
1. 在 ./mock 目录中创建一个名为 woocommerce-settings.js 的新文件。您可以在[此处](https://github.com/woocommerce/woocommerce/blob/trunk/packages/js/internal-js-tests/src/mocks/woocommerce-settings.js#L1)找到此文件的内容。
|
||
2. 接下来，创建一个名为 setup-globals.js 的文件。您可以在[此处](https://github.com/woocommerce/woocommerce/blob/trunk/packages/js/internal-js-tests/src/setup-globals.js#L44)找到此文件的内容。此文件的目的是模拟 wcSettings 全局变量。 |
