# @bryntum/gantt-react 中文文档 规范地址：https://npmcn.com/package/%40bryntum/gantt-react/ 版本：7\.3\.8 npm 元数据更新时间：2026-10-28T08:44:43.356Z 中文译文更新时间：2026-11-08T17:02:50.718Z 软件包许可：Commercial 本文由上游 README 翻译，可能存在偏差，请结合原文核对 API、命令与配置。版权与许可归原作者所有。 原始 npm 页面：https://www.npmjs.com/package/%40bryntum/gantt-react 原文对照：https://npmcn.com/package/%40bryntum/gantt-react/?lang=original 项目主页：https://bryntum.com/ ## 关键信息（来自 npm 元数据） - 包体积（解压后）：10.6 MB，420 个文件 - 模块格式：ESM + CJS - TypeScript 类型：包内自带 - Node.js 要求：\>=0\.10\.0 - 运行依赖：0 个 - 首次发布：2026-01-22T12:16:33.544Z - 最新版本发布：2026-10-28T08:44:43.053Z - 近 30 天下载量：3841（2026-10-09 至 2026-11-07，npm 官方下载统计） - 已发布版本数：17（近 12 个月 17 个） ## 中文简介 Bryntum Gant JavaScript 组件的回放包装 ## 安装 ```sh npm install @bryntum/gantt-react ``` 也可以使用：`pnpm add @bryntum/gantt-react`、`yarn add @bryntum/gantt-react`、`bun add @bryntum/gantt-react` ## README [![Bryntum logo](https://bryntum.com/resources/bryntum_logo_blue.svg)](https://bryntum.com/)      ![React](https://bryntum.com/products/grid/docs/data/Core/images/logo/react.svg) # 布林图姆·甘特反应包装 这个软件包包含一个包裹,将Bryntum Gantt封装起来,并变成反应组件,曝光 配置选项、属性、特性和事件. ## 版本要求 - 反应 : `18` 或更高 - 类型脚本 : `4.2` 或更高 - 维特 `5` 或更高 ## 软件包内容 | 路径 | 说明 | | --- | :-: | | `lib/` | 反应包装组件(BryntumGantt等) | | `src/` | 原始源文件 | ## 安装 ### 反应收发器 ```bash npm install @bryntum/gantt-react@latest ``` ### 组件包(需要) ```bash npm install @bryntum/gantt@latest ``` ## 尝试 Bryntum 在线演示 - [查看在线反应演示文稿](https://bryntum.com/products/gantt/examples/?framework=react) ## 快速启动 替换您的 `App.tsx` 含以下内容: ```typescript import { FunctionComponent, useRef } from 'react'; import { BryntumGantt } from '@bryntum/gantt-react'; import { ganttProps } from './Config'; import './App.scss'; const App: FunctionComponent = () => { const gantt = useRef(null); return ; }; export default App; ``` 创建一个 `GanttConfig.ts` 文档中 `src/` 包含以下内容的目录 : ```typescript import { BryntumGanttProps } from '@bryntum/gantt-react'; const ganttProps : BryntumGanttProps = { startDate : new Date(2026, 0, 1), endDate : new Date(2026, 2, 1), columns : [{ type : 'name', field : 'name', width : 250 }], viewPreset : 'weekAndDayLetter', barMargin : 10, project : { transport : { load : { url : 'data.json' } }, autoLoad : true, // Automatically introduces a `startnoearlier` constraint for tasks that (a) have no predecessors, (b) do not use // constraints and (c) aren't `manuallyScheduled` autoSetConstraints : true } }; export { ganttProps }; ``` 创建样本数据( 单击以扩展) 创建一个 `public/data/data.json` 例如,文件并添加以下JSON数据: ```javascript { "success": "true", "tasks": { "rows": [ { "id": 1, "name": "Documentation Project", "expanded": true, "children": [ { "id": 2, "name": "Preparation", "expanded": true, "children": [ { "id": 6, "name": "Proof-read docs", "startDate": "2026-01-02", "endDate": "2026-01-09" }, { "id": 3, "name": "Release docs", "startDate": "2026-01-09", "endDate": "2026-01-10" } ] }, { "id": 4, "name": "Development", "expanded": true, "children": [ { "id": 7, "name": "Write API docs", "startDate": "2026-01-05", "endDate": "2026-01-12" }, { "id": 8, "name": "Write tutorials", "startDate": "2026-01-10", "endDate": "2026-01-16" }, { "id": 9, "name": "Create examples", "startDate": "2026-01-12", "endDate": "2026-01-18" } ] }, { "id": 5, "name": "Review & Release", "expanded": true, "children": [ { "id": 10, "name": "Team review", "startDate": "2026-01-18", "endDate": "2026-01-20" }, { "id": 11, "name": "Final approval", "startDate": "2026-01-20", "endDate": "2026-01-21" }, { "id": 12, "name": "Public release", "startDate": "2026-01-22", "endDate": "2026-01-22" } ] } ] } ] }, "dependencies": { "rows": [ { "fromTask": 6, "toTask": 3 }, { "fromTask": 7, "toTask": 8 }, { "fromTask": 8, "toTask": 9 }, { "fromTask": 9, "toTask": 10 }, { "fromTask": 10, "toTask": 11 }, { "fromTask": 11, "toTask": 12 } ] } } ``` 这是Bryntum甘特将使用的数据. 最后,在你的风格上加一些 `App.css` 或者说 `index.css`数字 : ```css /* FontAwesome is used for icons */ @import '@bryntum/gantt/fontawesome/css/fontawesome.css'; @import '@bryntum/gantt/fontawesome/css/solid.css'; /* Structural CSS */ @import "@bryntum/gantt/gantt.css"; /* Bryntum theme of your choice */ @import "@bryntum/gantt/svalbard-light.css"; ``` ## 融合指南 关于安装和使用此软件包的详情,请参见 [反应整合指南](https://bryntum.com/products/gantt/docs/guide/Gantt/integration/react/guide)。 。 。 . ## 包装器 React spackers将Bryntum组件封装为本土React组件,暴露出所有配置选项, 属性,特征,和事件通过React-familiar模式如道具和回调. 访问 [包装文件](https://bryntum.com/products/gantt/docs/guide/Gantt/integration/react/guide#wrappers) 完整清单 包装组件. ## 特征 地物是扩展Bryntum Gantt功能的可选模块. 每个特性后缀为 `Feature` 财务报告和审定财务报表 可以通过标准反应道具启用并配置. 访问 [特征文件](https://bryntum.com/products/gantt/docs/guide/Gantt/integration/react/guide#features) 完整清单 特性及其配置选项. ## 探索所有Bryntum 产品 - [Bryntum 网格](https://bryntum.com/products/grid/) - 高性能数据网 - [Bryntum 调度器](https://bryntum.com/products/scheduler/) - 资源调度部分 - [Bryntum 调度器 Pro](https://bryntum.com/products/schedulerpro/) - 有依赖关系的高级排程 - [布林图姆·甘特](https://bryntum.com/products/gantt/) - 项目规划和管理 - [布林图姆日历](https://bryntum.com/products/calendar/) - 完整的日历组件 - [Bryntum 任务板](https://bryntum.com/products/taskboard/) - 坎班式任务管理 探索我们综合收集的演示文稿: | 产品 | ![JavaScript](https://bryntum.com/products/grid/docs/data/Core/images/logo/js.svg) Java 脚本 | ![React](https://bryntum.com/products/grid/docs/data/Core/images/logo/react.svg) 反应 | ![Vue](https://bryntum.com/products/grid/docs/data/Core/images/logo/vue.svg) 阴道 | ![Angular](https://bryntum.com/products/grid/docs/data/Core/images/logo/angular.svg) 角质 | | --- | :-: | :-: | :-: | :-: | | **网格** | [网格 JavaScript 演示](https://bryntum.com/products/grid/examples/?framework=javascript) | [网格反应演示](https://bryntum.com/products/grid/examples/?framework=react) | [网格 Vue 演示](https://bryntum.com/products/grid/examples/?framework=vue) | [网格角演示](https://bryntum.com/products/grid/examples/?framework=angular) | | **调度器** | [JavaScript 演示](https://bryntum.com/products/scheduler/examples/?framework=javascript) | [调度器反应演示](https://bryntum.com/products/scheduler/examples/?framework=react) | [调度员 Vue 演示](https://bryntum.com/products/scheduler/examples/?framework=vue) | [调度器](https://bryntum.com/products/scheduler/examples/?framework=angular) | | **调度器Pro** | [调度器 Pro JavaScript 演示](https://bryntum.com/products/schedulerpro/examples/?framework=javascript) | [排程器 Pro React 演示](https://bryntum.com/products/schedulerpro/examples/?framework=react) | [调度器 Pro Vue 演示](https://bryntum.com/products/schedulerpro/examples/?framework=vue) | [排程器 Pro Angular 演示](https://bryntum.com/products/schedulerpro/examples/?framework=angular) | | **甘特语** | [甘特Java脚本演示](https://bryntum.com/products/gantt/examples/?framework=javascript) | [甘特反应演示](https://bryntum.com/products/gantt/examples/?framework=react) | [Gantt Vue 演示](https://bryntum.com/products/gantt/examples/?framework=vue) | [Gantt 角力演示](https://bryntum.com/products/gantt/examples/?framework=angular) | | **日历** | [日历 JavaScript 演示](https://bryntum.com/products/calendar/examples/?framework=javascript) | [日历反应演示](https://bryntum.com/products/calendar/examples/?framework=react) | [日历 Vue 演示](https://bryntum.com/products/calendar/examples/?framework=vue) | [日历角演示](https://bryntum.com/products/calendar/examples/?framework=angular) | | **任务栏** | [任务板 JavaScript 演示](https://bryntum.com/products/taskboard/examples/?framework=javascript) | [任务板反应演示](https://bryntum.com/products/taskboard/examples/?framework=react) | [任务板 Vue 演示](https://bryntum.com/products/taskboard/examples/?framework=vue) | [任务板角演示](https://bryntum.com/products/taskboard/examples/?framework=angular) | ## 在线参考资料 - [布林图姆·甘特文件](https://bryntum.com/products/gantt/docs/) - [布林图姆甘特的例子](https://bryntum.com/products/gantt/examples/) - [布林图姆支持论坛](https://forum.bryntum.com/) - [联系我们](https://bryntum.com/contact/) ## 许可证和版权 这个包装器依赖于Bryntum Gantt,它是商业软件,需要付费许可证. 请访问 [Bryntum Gantt 结束用户许可证](https://bryntum.com/products/license/) 执照的全文. 版权所有:2009-2026年,Bryntum 版权所有. ## 常见问题 ### @bryntum/gantt-react 是什么？ Bryntum Gant JavaScript 组件的回放包装 ### 如何安装 @bryntum/gantt-react？ 在项目目录运行 npm install @bryntum/gantt-react，或使用 pnpm add / yarn add / bun add。 ### @bryntum/gantt-react 支持 TypeScript 吗？ 支持。包内自带 TypeScript 类型声明（package\.json 声明了 types 入口），安装后即可获得类型提示，无需再安装 @types 包。 ### @bryntum/gantt-react 支持 ESM 还是 CommonJS？ 同时提供 ES Module 与 CommonJS 入口，import 和 require\(\) 都可以使用，打包工具会自动选择合适的版本。 ### @bryntum/gantt-react 需要什么版本的 Node\.js？ package\.json 的 engines 字段要求 Node\.js \>=0\.10\.0。版本不符时 npm 默认只给出警告，开启 engine-strict 后会拒绝安装。 ### @bryntum/gantt-react 可以商用吗？ @bryntum/gantt-react 使用 Commercial 许可。声明的许可为 Commercial，请阅读许可原文确认使用条件。以上为概括，不构成法律意见，请以许可原文为准。 ### @bryntum/gantt-react 的下载量有多少？ 根据 npm 官方下载统计，@bryntum/gantt-react 在 2026/10/09 – 2026/11/07 这 30 天内被下载 3,841 次，日均约 128 次。下载量会把 CI 构建、镜像同步和作为其他包依赖的安装一并计入，适合横向比较热度，不能直接等同于使用人数。 ### @bryntum/gantt-react 还在维护吗？ 最新版本 7\.3\.8 发布于 2026/10/28（11 天前）；至今共发布 17 个版本，其中过去 12 个月发布了 17 个；首次发布于 2026/01/22。发布频率只是参考信号：功能稳定的工具可能很少需要更新，建议结合源码仓库的 issue 和提交记录判断。