# @ant-design/x-card 中文文档

规范地址：https://npmcn.com/package/%40ant-design/x-card/

版本：2\.10\.0
npm 元数据更新时间：2026-10-29T09:08:22.235Z
中文译文更新时间：2026-11-06T06:03:57.372Z
软件包许可：MIT

本文由上游 README 翻译，可能存在偏差，请结合原文核对 API、命令与配置。版权与许可归原作者所有。

原始 npm 页面：https://www.npmjs.com/package/%40ant-design/x-card
原文对照：https://npmcn.com/package/%40ant-design/x-card/?lang=original
项目主页：https://x.ant.design/x-card
源码仓库：https://github.com/ant-design/x

## 关键信息（来自 npm 元数据）

- 包体积（解压后）：319 kB，62 个文件
- 模块格式：ESM + CJS
- TypeScript 类型：包内自带
- 运行依赖：4 个
- peer 依赖：react \>=18\.0\.0，react-dom \>=18\.0\.0
- 首次发布：2026-03-31T03:57:41.350Z
- 最新版本发布：2026-10-29T09:08:22.014Z
- 近 30 天下载量：6636（2026-10-06 至 2026-11-04，npm 官方下载统计）
- 已发布版本数：6（近 12 个月 6 个）

## 中文简介

动态内容加载和管理的反应卡加载器

## 安装

```sh
npm install @ant-design/x-card
```

也可以使用：`pnpm add @ant-design/x-card`、`yarn add @ant-design/x-card`、`bun add @ant-design/x-card`

## README

# @ ant- design/ x- card

动态内容加载和管理的回放卡加载器.

## 特征

-   🚀 **动态加载**: 以可配置货币同步装入牌
-   🔄 **重试机制**: 自动重试, 以指数回放
-   ⚡ **业绩**: 在虚拟滚动支持下优化大型数据集
-   🎨 **可自定义**: 完全自定义的卡渲染和装入状态
-   📱 **响应**: 方便移动的响应性设计
-   🔧 **类型脚本**: 完整类型脚本支持

## 安装

```bash
npm install @ant-design/x-card
# or
yarn add @ant-design/x-card
# or
pnpm add @ant-design/x-card
```

## 使用量

### 基本用途

```tsx
import React from 'react';
import { CardLoader } from '@ant-design/x-card';

const App = () => {
  const cards = [
    {
      id: '1',
      title: 'Card 1',
      content: 'This is card content',
    },
    {
      id: '2',
      title: 'Card 2',
      content: 'Another card content',
    },
  ];

  return <CardLoader cards={cards} />;
};
```

### 高级使用

```tsx
import React from 'react';
import { CardLoader, useCardLoader } from '@ant-design/x-card';

const App = () => {
  const { state, actions } = useCardLoader({
    config: {
      maxConcurrent: 5,
      retryCount: 3,
      timeout: 10000,
    },
    customLoader: async (card) => {
      // Custom loading logic
      const response = await fetch(`/api/cards/${card.id}`);
      const data = await response.json();
      return data.content;
    },
  });

  React.useEffect(() => {
    actions.loadCards([
      { id: '1', title: 'Dynamic Card 1' },
      { id: '2', title: 'Dynamic Card 2' },
    ]);
  }, []);

  return (
    <CardLoader
      cards={state.cards}
      renderLoading={(card) => <div>Loading {card.title}...</div>}
      renderError={(error, card) => <div>Error: {error.message}</div>}
    />
  );
};
```

### 使用钩子

```tsx
import React from 'react';
import { useCardLoader } from '@ant-design/x-card';

const App = () => {
  const { state, actions } = useCardLoader();

  const addNewCard = () => {
    actions.addCard({
      id: Date.now().toString(),
      title: 'New Card',
      content: 'Dynamic content',
    });
  };

  return (
    <div>
      <button onClick={addNewCard}>Add Card</button>
      {state.cards.map((card) => (
        <div key={card.id}>
          <h3>{card.title}</h3>
          <p>{card.content}</p>
        </div>
      ))}
    </div>
  );
};
```

## API 密码

### 卡片记录器道具

| 财产 | 类型 | 默认 | 说明 |
| --- | --- | --- | --- |
| 纸牌 | CardLoader 连接 \[\] | \[ | 卡片配置阵列 |
| 配置 | 挂卡连接 | \- 说吧 | 装入器配置 |
| 自定义读取器 | 函数 | \- 说吧 | 自定义卡加载功能 |
| 质地 | 函数 | \- 说吧 | 自定义空状态渲染器 |
| 编译 | 函数 | \- 说吧 | 自定义装入状态渲染器 |
| 渲染错误 | 函数 | \- 说吧 | 自定义错误状态渲染器 |
| 挂起变化 | 函数 | \- 说吧 | 正在装入状态更改召回 |
| 卡尔路德 | 函数 | \- 说吧 | 卡片装入成功回调 |
| 证书错误 | 函数 | \- 说吧 | 卡片加载出错 回调 |
| allCards 已登录 | 函数 | \- 说吧 | 所有卡片已装入调用 |

### 挂卡连接

| 财产 | 类型 | 默认 | 说明 |
| --- | --- | --- | --- |
| 编号 | 字符串 | \- 说吧 | 特殊卡标识符 |
| 标题 | 字符串 | \- 说吧 | 卡片标题 |
| 内容 | 反应节点 | \- 说吧 | 卡片内容 |
| 类型 | “ 默认” qq“ info” ,“ 成功” ,“ 警告” ,“ 错误” | '默认' | 纸牌类型 |
| 装入 | 布尔 | 虚假 | 装入状态 |
| 可分解 | 布尔 | 虚假 | 是否关闭卡片 |
| 大小 | '小'''''中'''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''' | 中间 | 纸牌大小 |
| 已禁用 | 布尔 | 虚假 | 是否禁用卡片 |
| 类Name | 字符串 | \- 说吧 | 自定义 CSS 类 |
| 样式 | CSS 财产 | \- 说吧 | 自定义内行样式 |
| 额外 | 反应节点 | \- 说吧 | 卡片头中的额外内容 |

### 使用 CardLoader 钩

以 :

-   `state`: 当前加载器状态
-   `actions`页:1
    -   `addCard(card)`: 添加新牌
    -   `removeCard(id)`: 删除一张牌
    -   `updateCard(id, updates)`: 更新名片
    -   `reloadCard(id)`: 重新装入卡片
    -   `clearCards()`: 清除所有牌
    -   `getCardState(id)`: 获取卡片状态
    -   `loadCards(cards)`: 装入多张牌

## 发展

```bash
# Install dependencies
npm install

# Start development
npm run start

# Run tests
npm test

# Build
npm run compile
```

## 许可证

麻省理工学院

## 常见问题

### @ant-design/x-card 是什么？

动态内容加载和管理的反应卡加载器

### 如何安装 @ant-design/x-card？

在项目目录运行 npm install @ant-design/x-card，或使用 pnpm add / yarn add / bun add。它还需要宿主项目提供 peer 依赖：react（\>=18\.0\.0）、react-dom（\>=18\.0\.0）。npm 7 及以上与 pnpm 8 及以上默认会自动安装必需的 peer 依赖，Yarn 需要手动安装。

### @ant-design/x-card 支持 TypeScript 吗？

支持。包内自带 TypeScript 类型声明（package\.json 声明了 types 入口），安装后即可获得类型提示，无需再安装 @types 包。

### @ant-design/x-card 支持 ESM 还是 CommonJS？

同时提供 ES Module 与 CommonJS 入口，import 和 require\(\) 都可以使用，打包工具会自动选择合适的版本。

### @ant-design/x-card 可以商用吗？

@ant-design/x-card 使用 MIT 许可。宽松许可：允许商业使用、修改和再分发，通常只需在分发时保留原版权与许可声明。以上为概括，不构成法律意见，请以许可原文为准。

### @ant-design/x-card 的下载量有多少？

根据 npm 官方下载统计，@ant-design/x-card 在 2026/10/06 – 2026/11/04 这 30 天内被下载 6,636 次，日均约 221 次。下载量会把 CI 构建、镜像同步和作为其他包依赖的安装一并计入，适合横向比较热度，不能直接等同于使用人数。

### @ant-design/x-card 还在维护吗？

最新版本 2\.10\.0 发布于 2026/10/29（7 天前）；至今共发布 6 个版本，其中过去 12 个月发布了 6 个；首次发布于 2026/03/31。发布频率只是参考信号：功能稳定的工具可能很少需要更新，建议结合源码仓库的 issue 和提交记录判断。