布林图姆·甘特反应包装
这个软件包包含一个包裹,将Bryntum Gantt封装起来,并变成反应组件,曝光 配置选项、属性、特性和事件.
版本要求
- 反应 :
18或更高 - 类型脚本 :
4.2或更高 - 维特
5或更高
软件包内容
| 路径 | 说明 |
|---|---|
lib/ | 反应包装组件(BryntumGantt等) |
src/ | 原始源文件 |
安装
反应收发器
npm install @bryntum/gantt-react@latest
组件包(需要)
npm install @bryntum/gantt@latest
尝试 Bryntum 在线演示
快速启动
替换您的 App.tsx 含以下内容:
import { FunctionComponent, useRef } from 'react';
import { BryntumGantt } from '@bryntum/gantt-react';
import { ganttProps } from './Config';
import './App.scss';
const App: FunctionComponent = () => {
const gantt = useRef<BryntumGantt>(null);
return <BryntumGantt ref={gantt} {...ganttProps} />;
};
export default App;
创建一个 GanttConfig.ts 文档中 src/ 包含以下内容的目录 :
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数据:
{
"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数字 :
/* 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";
融合指南
关于安装和使用此软件包的详情,请参见 反应整合指南。 。 。 .
包装器
React spackers将Bryntum组件封装为本土React组件,暴露出所有配置选项, 属性,特征,和事件通过React-familiar模式如道具和回调.
访问 包装文件 完整清单 包装组件.
特征
地物是扩展Bryntum Gantt功能的可选模块. 每个特性后缀为 Feature 财务报告和审定财务报表
可以通过标准反应道具启用并配置.
访问 特征文件 完整清单 特性及其配置选项.
探索所有Bryntum 产品
- Bryntum 网格 - 高性能数据网
- Bryntum 调度器 - 资源调度部分
- Bryntum 调度器 Pro - 有依赖关系的高级排程
- 布林图姆·甘特 - 项目规划和管理
- 布林图姆日历 - 完整的日历组件
- Bryntum 任务板 - 坎班式任务管理
探索我们综合收集的演示文稿:
在线参考资料
许可证和版权
这个包装器依赖于Bryntum Gantt,它是商业软件,需要付费许可证. 请访问 Bryntum Gantt 结束用户许可证 执照的全文.
版权所有:2009-2026年,Bryntum 版权所有.