⚡

AntDesignReact组件库技能Skill ant-design-react

该技能提供 Ant Design React 组件库的全面使用指南，帮助开发者快速构建 React 应用，支持组件如按钮、表单、表格的集成，主题定制，国际化，TypeScript 类型支持等，关键词包括 Ant Design, React, 组件库, 前端开发, UI 设计, 主题定制, 国际化, TypeScript。

前端开发 0 次安装 0 次浏览 更新于 3/22/2026

name: ant-design-react description: 提供 Ant Design React 组件库的全面指导，包括组件、设计系统、主题和 TypeScript 支持。当用户询问 Ant Design for React、需要使用 Ant Design 构建 React 应用或实现设计系统模式时使用。 license: 完整条款在 LICENSE.txt

何时使用此技能

使用此技能当用户想要：

  • 使用 Ant Design 组件构建 React 应用
  • 使用 Ant Design UI 组件（按钮、表单、表格、输入框、选择器等）
  • 自定义 Ant Design 主题和样式
  • 使用 Ant Design 实现国际化（i18n）
  • 在 TypeScript 中使用 Ant Design
  • 创建带有验证的表单
  • 在表格和列表中显示数据
  • 实现导航和布局
  • 使用 Ant Design 图标
  • 处理用户反馈（模态框、消息、通知）
  • 实现数据可视化组件
  • 使用 Ant Design 设计令牌和设计系统

如何使用此技能

此技能按照 Ant Design React 官方文档结构组织（https://4x-ant-design.antgroup.com/docs/react/introduce-cn, https://4x-ant-design.antgroup.com/components/overview-cn/）。处理 Ant Design React 时：

  1. 识别主题 从用户的请求中：

    • 快速开始 → examples/getting-started/installation.md 或 examples/getting-started/basic-usage.md
    • 按钮 → examples/components/button.md
    • 表单 → examples/components/form.md
    • 表格 → examples/components/table.md
    • 输入框 → examples/components/input.md
    • 选择器 → examples/components/select.md
    • 日期选择器 → examples/components/date-picker.md
    • 对话框 → examples/components/modal.md
    • 布局 → examples/components/layout.md
    • 菜单 → examples/components/menu.md
    • 主题定制 → examples/advanced/theme-customization.md
    • 国际化 → examples/advanced/internationalization.md
    • 类型支持 → examples/advanced/typescript.md

  2. 加载适当的示例文件 从 examples/ 目录：

    快速开始 - examples/getting-started/:

    • examples/getting-started/installation.md - 安装 Ant Design 和基本设置
    • examples/getting-started/basic-usage.md - 基本组件使用

    组件 - examples/components/:

    • examples/components/button.md - 按钮组件
    • examples/components/input.md - 输入框组件
    • examples/components/form.md - 带验证的表单组件
    • examples/components/table.md - 表格组件
    • examples/components/select.md - 选择器组件
    • examples/components/date-picker.md - 日期选择器组件
    • examples/components/modal.md - 模态框组件
    • examples/components/layout.md - 布局组件
    • examples/components/menu.md - 菜单组件
    • examples/components/icon.md - 图标组件
    • examples/components/typography.md - 排版组件
    • examples/components/grid.md - 网格组件
    • examples/components/space.md - 间距组件
    • examples/components/card.md - 卡片组件
    • examples/components/tabs.md - 标签页组件
    • examples/components/pagination.md - 分页组件
    • examples/components/upload.md - 上传组件
    • examples/components/message.md - 消息组件
    • examples/components/notification.md - 通知组件
    • examples/components/alert.md - 警告组件
    • examples/components/spin.md - 加载组件
    • examples/components/progress.md - 进度条组件

    高级 - examples/advanced/:

    • examples/advanced/theme-customization.md - 自定义主题
    • examples/advanced/internationalization.md - 国际化设置
    • examples/advanced/typescript.md - TypeScript 支持

  3. 遵循具体说明 在该示例文件中，包括语法、结构和最佳实践

    重要注意事项:

    • 所有示例遵循 Ant Design React 4.x API
    • 示例包括 JavaScript 和 TypeScript 版本（如果适用）
    • 每个示例文件包括关键概念、代码示例和要点
    • 始终检查示例文件以获取最佳实践和常见模式

  4. 参考 API 文档 在 api/ 目录中当需要时：

    • api/components.md - 组件 API 参考
    • api/config-provider.md - ConfigProvider API
    • api/design-tokens.md - 设计令牌 API

  5. 使用模板 从 templates/ 目录：

    • templates/project-setup.md - 项目设置模板
    • templates/component-template.md - 组件使用模板

文档映射（与官方文档一一对应）

指南:

组件:

示例和模板

此技能包括详细示例，组织方式与官方文档结构匹配。所有示例在 examples/ 目录中（见上方映射）。

使用示例:

  • 从用户的请求中识别主题
  • 从上方映射加载适当的示例文件
  • 遵循该文件中的说明、语法和最佳实践
  • 将代码示例适应到您的特定用例

使用模板:

  • 参考 templates/ 目录中的模板以获取常见脚手架
  • 将模板适应到您的特定需求和编码风格

API 参考

详细 API 文档在 api/ 目录中可用，组织方式与官方 Ant Design React API 文档结构匹配：

组件 API (api/components.md)

  • 所有组件属性和 API
  • 组件方法和事件
  • 组件类型和接口

ConfigProvider API (api/config-provider.md)

  • ConfigProvider 组件 API
  • 全局配置选项
  • 区域设置配置

设计令牌 API (api/design-tokens.md)

  • 设计令牌参考
  • 主题定制令牌
  • CSS 变量

使用 API 参考:

  1. 识别您需要帮助的 API
  2. 从 api/ 目录加载相应的 API 文件
  3. 查找 API 签名、参数、返回类型和示例
  4. 参考链接的示例文件以获取详细使用模式
  5. 所有 API 文件包括到 examples/ 目录中相关示例文件的链接

最佳实践

  1. 导入样式: 在入口文件中导入 Ant Design CSS
  2. 使用 ConfigProvider: 用 ConfigProvider 包装您的应用以进行全局配置
  3. 表单验证: 使用 Form 组件和验证规则
  4. TypeScript: 使用 TypeScript 以获得更好的类型安全性
  5. 主题定制: 使用设计令牌进行一致的主题化
  6. 国际化: 使用 ConfigProvider 和区域设置进行 i18n
  7. 组件组合: 组合组件以构建复杂 UI
  8. 性能: 使用 React.memo 和 useMemo 进行优化
  9. 可访问性: 遵循 Ant Design 可访问性指南
  10. 响应式设计: 使用网格和响应式工具

资源

关键词

Ant Design, Ant Design React, antd, React UI 库, 组件, 按钮, 表单, 表格, 输入框, 选择器, 日期选择器, 对话框, 布局, 菜单, 主题, 定制, 国际化, i18n, TypeScript, 设计系统, 组件库