# @deskpro/react-components 中文文档 规范地址：https://npmcn.com/package/%40deskpro/react-components/ 版本：1\.4\.10 npm 元数据更新时间：2026-08-14T13:16:17.614Z 中文译文更新时间：2026-11-12T12:41:45.099Z 软件包许可：BSD-3-Clause 本文由上游 README 翻译，可能存在偏差，请结合原文核对 API、命令与配置。版权与许可归原作者所有。 原始 npm 页面：https://www.npmjs.com/package/%40deskpro/react-components 原文对照：https://npmcn.com/package/%40deskpro/react-components/?lang=original 项目主页：https://github.com/deskpro/react-components 源码仓库：https://github.com/deskpro/react-components ## 关键信息（来自 npm 元数据） - 包体积（解压后）：8.2 MB，325 个文件 - 模块格式：CommonJS - TypeScript 类型：未声明 - 运行依赖：15 个 - peer 依赖：react ^15\.6\.2 \|\| ^16\.0\.0-alpha，moment \>=2\.20\.0 - 首次发布：2017-10-23T15:44:18.668Z - 最新版本发布：2022-07-24T13:41:06.515Z - 近 30 天下载量：2506（2026-10-12 至 2026-11-10，npm 官方下载统计） - 已发布版本数：96（近 12 个月 0 个） ## 中文简介 Deskpro 反应组件 ## 安装 ```sh npm install @deskpro/react-components ``` 也可以使用：`pnpm add @deskpro/react-components`、`yarn add @deskpro/react-components`、`bun add @deskpro/react-components` ## README # @ deskpro/ react- 组件 基于反应的一组组件用于构建 DeskPRO apps. [![Build Status](https://travis-ci.org/deskpro/react-components.svg?branch=master)](https://travis-ci.org/deskpro/react-components) [![Coverage Status](https://coveralls.io/repos/github/deskpro/react-components/badge.svg)](https://coveralls.io/github/deskpro/react-components) [![License](https://img.shields.io/badge/License-BSD%203--Clause-blue.svg)](https://github.com/deskpro/react-components/blob/master/LICENSE) [![npm version](https://img.shields.io/npm/v/@deskpro/react-components.svg?style=flat)](https://www.npmjs.com/package/@deskpro/react-components) [![Storybook](https://github.com/storybooks/press/raw/master/badges/storybook.svg?sanitize=true)](https://deskpro.github.io/react-components) - [概览](https://npmcn.com/package/%40deskpro/react-components/#readme-overview) - [构成部分](https://npmcn.com/package/%40deskpro/react-components/#readme-components) - [常见](https://npmcn.com/package/%40deskpro/react-components/#readme-common) - [表单](https://npmcn.com/package/%40deskpro/react-components/#readme-forms) - [按钮](https://npmcn.com/package/%40deskpro/react-components/#readme-buttons) - [列数](https://npmcn.com/package/%40deskpro/react-components/#readme-columns) - [标签](https://npmcn.com/package/%40deskpro/react-components/#readme-tabs) - [纸牌](https://npmcn.com/package/%40deskpro/react-components/#readme-cards) - [标签](https://npmcn.com/package/%40deskpro/react-components/#readme-badges) - [公用事业](https://npmcn.com/package/%40deskpro/react-components/#readme-utilities) - [道具](https://npmcn.com/package/%40deskpro/react-components/#readme-props) - [数字](https://npmcn.com/package/%40deskpro/react-components/#readme-numbers) - [字符串](https://npmcn.com/package/%40deskpro/react-components/#readme-strings) - [正则表达式](https://npmcn.com/package/%40deskpro/react-components/#readme-regexp) - [对象](https://npmcn.com/package/%40deskpro/react-components/#readme-objects) - [日期](https://npmcn.com/package/%40deskpro/react-components/#readme-dates) - [管理部](https://npmcn.com/package/%40deskpro/react-components/#readme-dom) - [支助科](https://npmcn.com/package/%40deskpro/react-components/#readme-css) - [约束](https://npmcn.com/package/%40deskpro/react-components/#readme-bindings) - [许可证](https://npmcn.com/package/%40deskpro/react-components/#readme-license) ## 概览 在线提供故事书演示 [https://deskpro.github.io/反应-组件](https://deskpro.github.io/react-components)。 。 。 . ## 构成部分 - [警报](https://npmcn.com/package/%40deskpro/react-components/docs/components/alert.md) 发送通知信息. - [图标](https://npmcn.com/package/%40deskpro/react-components/docs/components/icon.md) 使用 Font Cousin 库创建图标. - [有远见](https://npmcn.com/package/%40deskpro/react-components/docs/components/avatar.md) 渲染出一个外形图像. - [紧急性](https://npmcn.com/package/%40deskpro/react-components/docs/components/urgency.md) 在框中显示一个消息,其颜色与1至10之间的紧急级别相匹配. - [进展](https://npmcn.com/package/%40deskpro/react-components/docs/components/progress.md) 创建进度栏 . - [恒星数](https://npmcn.com/package/%40deskpro/react-components/docs/components/stars.md) 渲染出一组代表1至5之间一票的明星图标. - [装入器](https://npmcn.com/package/%40deskpro/react-components/docs/components/loader.md) 将一款动画"装填器"旋转. ### 常见 - [常见/标题](https://npmcn.com/package/%40deskpro/react-components/docs/components/common/heading.md) 通用标题元素 . - [共同/国家](https://npmcn.com/package/%40deskpro/react-components/docs/components/common/count.md) 将数字编成千行格式. - [共同/分标题](https://npmcn.com/package/%40deskpro/react-components/docs/components/common/subheading.md) 系一个分标题. - [常见/](https://npmcn.com/package/%40deskpro/react-components/docs/components/common/popper.md) 使用绝对定位来放置元素相对于其他元素. - [常见/门户](https://npmcn.com/package/%40deskpro/react-components/docs/components/common/portal.md) 将孩子安置在文档中. - [常见/可拆卸列表](https://npmcn.com/package/%40deskpro/react-components/docs/components/common/toggleable_list.md) 通过应对儿童所引发的事件,改变其儿童的道具价值. - [常见/可查询列表](https://npmcn.com/package/%40deskpro/react-components/docs/components/common/queryable_list.md) 未排序的列表, 可通过查询值过滤并缩小 . - [常见/可选列表](https://npmcn.com/package/%40deskpro/react-components/docs/components/common/selectable_list.md) 可用箭头键滚动的无序列表 . - [常见/滚动栏](https://npmcn.com/package/%40deskpro/react-components/docs/components/common/scrollbar.md) 用有风格的滚动条环绕孩子们. - [常见/重点](https://npmcn.com/package/%40deskpro/react-components/docs/components/common/highlighter.md) 突出一个词或短语. ### 表单 - [表单/表格](https://npmcn.com/package/%40deskpro/react-components/docs/components/forms/form.md) 制作表格并处理其提交. - [窗体/组](https://npmcn.com/package/%40deskpro/react-components/docs/components/forms/group.md) 将一个标签组成一个孩子. - [表格/投入](https://npmcn.com/package/%40deskpro/react-components/docs/components/forms/input.md) 标准格式输入元素. - [表单/图案](https://npmcn.com/package/%40deskpro/react-components/docs/components/forms/textarea.md) 创建窗体文本区域. - [窗体/隐藏字段](https://npmcn.com/package/%40deskpro/react-components/docs/components/forms/hidden_fields.md) 环绕可能显示或隐藏的可选窗体字段. - [窗体/搜索内置](https://npmcn.com/package/%40deskpro/react-components/docs/components/forms/search_inline.md) 渲染内置搜索输入. - [窗体/搜索](https://npmcn.com/package/%40deskpro/react-components/docs/components/forms/search_submit.md) 将搜索结果显示在输入下方的跳出器中. - [窗体/搜索按钮](https://npmcn.com/package/%40deskpro/react-components/docs/components/forms/search_button.md) 创建打开搜索窗体的按钮. - [表单/日期拾取器](https://npmcn.com/package/%40deskpro/react-components/docs/components/forms/datepicker.md) 将一个输入带下拉取日期器. - [表格/自定义选择](https://npmcn.com/package/%40deskpro/react-components/docs/components/forms/custom_select.md) 渲染自定义选择输入. - [窗体/切换](https://npmcn.com/package/%40deskpro/react-components/docs/components/forms/toggle.md) 生成切换输入 . ### 按钮 - [按钮/ 按钮](https://npmcn.com/package/%40deskpro/react-components/docs/components/buttons/button.md) 标准按钮. - [按钮/确认按钮](https://npmcn.com/package/%40deskpro/react-components/docs/components/buttons/confirm_button.md) 点击确认按钮 . - [按钮/ Split 按钮](https://npmcn.com/package/%40deskpro/react-components/docs/components/buttons/split_button.md) 以左侧和右侧为按钮,单击右侧打开弹出器. - [按钮/ 降下按钮](https://npmcn.com/package/%40deskpro/react-components/docs/components/buttons/dropdown_button.md) 给一个按钮, 上面有一个下放的图标和弹出器. - [按钮/ 进步按钮](https://npmcn.com/package/%40deskpro/react-components/docs/components/buttons/progress_button.md) 创建包含进度栏的按钮. - [按钮/ 翻译按钮](https://npmcn.com/package/%40deskpro/react-components/docs/components/buttons/translate_button.md) 与 Global 图标一起创建进度按钮. ### 列数 - [栏/栏](https://npmcn.com/package/%40deskpro/react-components/docs/components/columns/column.md) 包含可扩展抽屉的导航柱. - [列/绘图器](https://npmcn.com/package/%40deskpro/react-components/docs/components/columns/drawer.md) 导航栏内可扩展的抽屉. - [栏/项目](https://npmcn.com/package/%40deskpro/react-components/docs/components/columns/item.md) 可能包含图标和号码的标准抽屉项目. ### 标签 - [标签/标签](https://npmcn.com/package/%40deskpro/react-components/docs/components/tabs/tabs.md) 将一组链接作为标签. ### 纸牌 - [贺卡/贺卡](https://npmcn.com/package/%40deskpro/react-components/docs/components/cards/card.md) 制作出标准卡片. ### 标签 - [徽章/图文包](https://npmcn.com/package/%40deskpro/react-components/docs/components/badges/text_badge.md) 把任何文字都当作徽章. - [徽章/环形徽章](https://npmcn.com/package/%40deskpro/react-components/docs/components/badges/circle_badge.md) 圆形徽章被设计为显示小数字. - [徽章/日期包](https://npmcn.com/package/%40deskpro/react-components/docs/components/badges/date_badge.md) 以徽章或避孕药格式显示月份和天数. ## 公用事业 - [新编号](https://npmcn.com/package/%40deskpro/react-components/docs/utils/newid.md) 生成一个独特的 id 值 . - [无](https://npmcn.com/package/%40deskpro/react-components/docs/utils/noop.md) 提供空函数作为默认回调. ### 道具 - [道具/儿童](https://npmcn.com/package/%40deskpro/react-components/docs/utils/props/children_component_type.md) 返回 proTypes 中使用的函数,以验证孩子是否属于特定组件类型. ### 数字 - [数字/数字格式](https://npmcn.com/package/%40deskpro/react-components/docs/utils/numbers/number_format.md) 格式化数字,在千位中包含逗号(或任何分隔符). - [数字/数字](https://npmcn.com/package/%40deskpro/react-components/docs/utils/numbers/number_random.md) 返回最小和最大数字之间的随机整数. ### 字符串 - [字符串/字符串上首](https://npmcn.com/package/%40deskpro/react-components/docs/utils/strings/string_upper_first.md) 大写字符串中的第一个字母 . - [字符串/字符串EscapeHTML](https://npmcn.com/package/%40deskpro/react-components/docs/utils/strings/string_escape_html.md) 将 HTML 特殊字符转换为实体. - [字符串/字符串](https://npmcn.com/package/%40deskpro/react-components/docs/utils/strings/string_highlight.md) 在给定字符串中找到的 HTML 标记中将给定的单词包起来. - [字符串/字符串刑警组织](https://npmcn.com/package/%40deskpro/react-components/docs/utils/strings/string_interpolate.md) 插入给定字符串中找到的占位符值 . ### 正则表达式 - [正则表达式/正则表达式](https://npmcn.com/package/%40deskpro/react-components/docs/utils/regexp/regexp_escape.md) 逃避任何特殊正则表达式字符的给定字符串. ### 对象 - [对象/对象KeyFilter](https://npmcn.com/package/%40deskpro/react-components/docs/utils/objects/object_key_filter.md) 对两个对象进行密钥比较,从第二个对象中键存在的第一个对象中删除. - [对象/对象](https://npmcn.com/package/%40deskpro/react-components/docs/utils/objects/object_foreach.md) 在物体上爬行. - [对象/对象映射](https://npmcn.com/package/%40deskpro/react-components/docs/utils/objects/object_map.md) 从调用对象中每个项的函数的结果创建数组. ### 日期 - [日期/日期](https://npmcn.com/package/%40deskpro/react-components/docs/utils/dates/date_number_of_days_in_month.md) 返回指定日期的天数. - [日期/日期 日历日](https://npmcn.com/package/%40deskpro/react-components/docs/utils/dates/date_calendar_days.md) 返回指定日期所有天数的数组 - [日期/日期 周一](https://npmcn.com/package/%40deskpro/react-components/docs/utils/dates/date_to_month.md) 返回指定日期的月份名称. ### 管理部 - [dom/dom Is ReactClass 组件](https://npmcn.com/package/%40deskpro/react-components/docs/utils/dom/dom_is_react_class_component.md) 测试对象是否是一个扩展反应的类。 构成部分. - [dom/dom Is ReactFunction 组件](https://npmcn.com/package/%40deskpro/react-components/docs/utils/dom/dom_is_react_function_component.md) 测试一个对象是否为无国籍的功能元件. - [dom/dom Is React Conceptionent (多姆/dom ) 操作组件](https://npmcn.com/package/%40deskpro/react-components/docs/utils/dom/dom_is_react_component.md) 测试对象是否是任何类型的反应组件. - [多姆/多姆元素](https://npmcn.com/package/%40deskpro/react-components/docs/utils/dom/dom_is_element.md) 测试对象是有效的DOM还是反应元素. ### 支助科 - [css/csMatch 计算宽度](https://npmcn.com/package/%40deskpro/react-components/docs/utils/css/css_match_computed_width.md) 将一个元素的宽度设定为另一个元素的计算宽度. ### 约束 - [Redux 窗体](https://npmcn.com/package/%40deskpro/react-components/docs/bindings/redux-form.md) ### 许可证 该库根据BSD许可证发布. 见 [自由主义](https://npmcn.com/package/%40deskpro/react-components/LICENSE) 更多信息. ## 常见问题 ### @deskpro/react-components 是什么？ Deskpro 反应组件 ### 如何安装 @deskpro/react-components？ 在项目目录运行 npm install @deskpro/react-components，或使用 pnpm add / yarn add / bun add。它还需要宿主项目提供 peer 依赖：react（^15\.6\.2 \|\| ^16\.0\.0-alpha）、moment（\>=2\.20\.0）。npm 7 及以上与 pnpm 8 及以上默认会自动安装必需的 peer 依赖，Yarn 需要手动安装。 ### @deskpro/react-components 支持 TypeScript 吗？ 该包的 package\.json 没有声明类型入口。需要类型提示时，可以在 npm 上查找社区维护的 @types/deskpro\_\_react-components 是否存在。 ### @deskpro/react-components 支持 ESM 还是 CommonJS？ 以 CommonJS 形式发布，可以直接 require\(\)；在 ES Module 项目中也可以用 import 引入（Node\.js 会把 module\.exports 作为默认导出）。 ### @deskpro/react-components 可以商用吗？ @deskpro/react-components 使用 BSD-3-Clause 许可。宽松许可：允许商业使用、修改和再分发，通常只需在分发时保留原版权与许可声明。另外不得用原作者名义为衍生产品背书。以上为概括，不构成法律意见，请以许可原文为准。 ### @deskpro/react-components 的下载量有多少？ 根据 npm 官方下载统计，@deskpro/react-components 在 2026/10/12 – 2026/11/10 这 30 天内被下载 2,506 次，日均约 84 次。下载量会把 CI 构建、镜像同步和作为其他包依赖的安装一并计入，适合横向比较热度，不能直接等同于使用人数。 ### @deskpro/react-components 还在维护吗？ 最新版本 1\.4\.10 发布于 2022/07/24（4 年前）；至今共发布 96 个版本，其中过去 12 个月发布了 0 个；首次发布于 2017/10/23。发布频率只是参考信号：功能稳定的工具可能很少需要更新，建议结合源码仓库的 issue 和提交记录判断。