# @dabeng/react-orgchart 中文文档

规范地址：https://npmcn.com/package/%40dabeng/react-orgchart/

版本：1\.0\.3
npm 元数据更新时间：2022-11-19T01:06:13.277Z
中文译文更新时间：2026-11-11T08:18:00.885Z
软件包许可：MIT

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

原始 npm 页面：https://www.npmjs.com/package/%40dabeng/react-orgchart
原文对照：https://npmcn.com/package/%40dabeng/react-orgchart/?lang=original
项目主页：https://github.com/dabeng/react-orgchart#readme
源码仓库：https://github.com/dabeng/react-orgchart

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

- 包体积（解压后）：65.1 kB，9 个文件
- 模块格式：CommonJS
- TypeScript 类型：未声明
- 运行依赖：4 个
- peer 依赖：react \>=16\.12\.0，react-dom \>=16\.12\.0
- 首次发布：2020-01-13T05:23:46.170Z
- 最新版本发布：2022-11-19T01:06:13.214Z
- 近 30 天下载量：27527（2026-10-11 至 2026-11-09，npm 官方下载统计）
- 已发布版本数：12（近 12 个月 0 个）

## 中文简介

![OrgChart](http://dabeng.github.io/OrgChart/img/heading.svg)

## 安装

```sh
npm install @dabeng/react-orgchart
```

也可以使用：`pnpm add @dabeng/react-orgchart`、`yarn add @dabeng/react-orgchart`、`bun add @dabeng/react-orgchart`

## README

![OrgChart](http://dabeng.github.io/OrgChart/img/heading.svg)

# [j 查询版本](https://github.com/dabeng/OrgChart)

# [ES6 版本](http://github.com/dabeng/OrgChart.js)

# [Web 组件版本](http://github.com/dabeng/OrgChart-Webcomponents)

# [Vue.js 版本](https://github.com/dabeng/vue-orgchart)

# [Angular 版本 - 最节省空间的解决方案](https://github.com/dabeng/ng-orgchart)

## 特征

-   扩展/缩放节点
-   允许用户通过拖放节点更改 orgchart 结构
-   允许用户编辑 org 图表
-   支持导出图表为图片或 pdf 文档
-   支持平面并缩放
-   允许用户自定义每个节点的内部结构

## 道具

| 名称 | 类型 | 默认 | 说明 |
| --- | --- | --- | --- |
| 图表分类 | 字符串 |  | 用于图 DOM 节点的 Css 类. |
| 容器分类 | 字符串 |  | 添加一个可选的额外类名到.orgchart-container 它可能看起来像是类="orgchart-container xxxyyy". |
| 可折叠 | 布尔 | 真实 | 允许扩展/压缩节点. |
| 数据源 | 对象 |  | 数据源 used 用于构建 orgchart 的结构. |
| 可拖动 | 布尔 | 虚假 | 允许将节点拖放到图表的层次. |
| 多个选择 | 布尔 | 虚假 | 如果真实,用户可以通过鼠标点击选择多个节点. |
| 节点模板 | 元素类型 |  | 一个提供节点内容的组件 Markup. 当您想要使用自己的风格和标记来创建自定义的 Orgchart 节点时,此道具是有用的. |
| 点击图 | 函数 |  | 当 Orgchart 点击时, 调用已启动 . |
| 点击节点 | 函数 |  | 点出节点时调用. |
| 平板电脑 | 布尔 | 虚假 | 如果是真的,图表可以被平面. |
| 缩放 | 布尔 | 虚假 | 如果真实,图表可以缩放. |
| 动物保护网 | 编号 | 第7条 | 用户可以以不同的尺度(0.5~7)来放大图表. |
| 缩放范围 | 编号 | 0.5 (韩语) | 用户可以以不同的尺度(0.5~7)来放大图表. |

## 方法

| 名称 | 说明 |
| --- | --- |
| 扩展所有节点 | 用户可以使用这种方法来扩展所有节点. 样本代码: orgchart Ref.current.expand AllNodes () |
| 导出为 | 用户可以使用这种方法导出 orgchart 到 png org pdf 文件. 样本代码: orgchart Ref.current.exportTo(文件名,文件扩展名) |

## 安装

```
npm install @dabeng/react-orgchart
```

## [演示](https://codesandbox.io/s/react-orgchart-demo-o3nf6)

这个项目是和 [创建反应应用](https://github.com/facebook/create-react-app)。 。 。 .

## 可用的脚本

在工程目录中,您可以运行:

### `npm start`

在开发模式下运行应用程序.  
打开 [http://localhost:3:00 (英语)](http://localhost:3000/) 在浏览器中查看.

如果您做了编辑, 页面会重新装入 .  
您也会看到控制台上的任何错误 .

### `npm test`

启动交互式监视模式下的测试跑取器.  
见关于 [运行中的测试](https://facebook.github.io/create-react-app/docs/running-tests) 更多信息.

### `npm run build`

构建用于制作的应用程序 `build` 文件夹.  
它正确地捆绑了React在生产模式中,并优化了构件以达到最佳性能.

构件被精密化,文件名包括散列.  
你的应用程序准备就绪!

见关于 [部署](https://facebook.github.io/create-react-app/docs/deployment) 更多信息.

### `npm run eject`

**注:这是单向操作. 曾经 `eject`你们不能回去!**

如果您对构建工具和配置选择不满意, 你可以 `eject` 在任何时间。 此命令将会从您的工程中删除单个构建依赖 .

相反,它会将所有配置文件和过渡依赖(Webpack, Babel, ESLint等)复制到您的项目中, 这样你就可以完全控制它们. 所有的命令,除了 `eject` 但是他们会指向复制的脚本 这样你就可以修改它们 这时候你只能靠自己了.

你永远不用用 `eject`。 配置的功能集适合中小型部署, 你不应该觉得有义务使用这个功能。 但是,我们明白,如果你在准备使用时不能定制这个工具,这个工具将毫无用处.

## 学习更多

你可以多学点 [创建 App 文档](https://facebook.github.io/create-react-app/docs/getting-started)。 。 。 .

学回放,看看 [反应文档](https://reactjs.org/)。 。 。 .

### 代码分割

本节移于此: [https://facebook.github.io/create-react-app/docs/code-splition 页面存档备份,存于互联网档案馆](https://facebook.github.io/create-react-app/docs/code-splitting)

### 分析套装大小

本节移于此: [https://facebook.github.io/create-react-app/docs/analysis-the-bundle-size 页面存档备份,存于互联网档案馆](https://facebook.github.io/create-react-app/docs/analyzing-the-bundle-size)

### 制作渐进网络应用程序

本节移于此: [页:1](https://facebook.github.io/create-react-app/docs/making-a-progressive-web-app)

### 高级配置

本节移于此: [https://facebook.github.io/create-react-app/docs/advanced-confignation 页面存档备份,存于互联网档案馆](https://facebook.github.io/create-react-app/docs/advanced-configuration)

### 部署

本节移于此: [https://facebook.github.io/create-react-app/docs/ 部署](https://facebook.github.io/create-react-app/docs/deployment)

### `npm run build` 无法最小化

本节移于此: [https://facebook.github.io/create-react-app/docs/troubleshooting#npm-run-building-fails-to-minify 互联网档案馆的存檔,存档日期2013-12-22](https://facebook.github.io/create-react-app/docs/troubleshooting#npm-run-build-fails-to-minify)

## 常见问题

### 如何安装 @dabeng/react-orgchart？

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

### @dabeng/react-orgchart 支持 TypeScript 吗？

该包的 package\.json 没有声明类型入口。需要类型提示时，可以在 npm 上查找社区维护的 @types/dabeng\_\_react-orgchart 是否存在。

### @dabeng/react-orgchart 支持 ESM 还是 CommonJS？

以 CommonJS 形式发布，可以直接 require\(\)；在 ES Module 项目中也可以用 import 引入（Node\.js 会把 module\.exports 作为默认导出）。

### @dabeng/react-orgchart 可以商用吗？

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

### @dabeng/react-orgchart 的下载量有多少？

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

### @dabeng/react-orgchart 还在维护吗？

最新版本 1\.0\.3 发布于 2022/11/19（3 年前）；至今共发布 12 个版本，其中过去 12 个月发布了 0 个；首次发布于 2020/01/13。发布频率只是参考信号：功能稳定的工具可能很少需要更新，建议结合源码仓库的 issue 和提交记录判断。