React API
@iyotsuba/gantt-react 导出 YgGantt、全部 React 类型，并重新导出 Core 数据类型与算法。
Props
数据与视图
| 属性 | 类型 | 默认值 | 说明 |
|---|---|---|---|
tasks | GanttTask[] | 必填 | 有序任务行 |
links | GanttLink[] | [] | 依赖关系 |
view | ViewPresetId | - | 受控维度 |
defaultView | ViewPresetId | 'week' | 非受控初始维度 |
timelineRange | GanttTimelineRange | 数据范围 | 外部日期范围 |
autoFocus | boolean | AutoFocusOptions | true | 初始或维度变化后的聚焦策略 |
zoom | number | 1 | 时间轴密度，内部限制为 0.4...3 |
selectedTaskId | string | - | 受控选中任务 |
readonly | boolean | false | 禁用任务拖动与缩放 |
布局与虚拟化
| 属性 | 类型 | 默认值 | 说明 |
|---|---|---|---|
title | string | '项目计划' | 图表无障碍名称与标题 |
height | number | 520 | 组件固定高度 |
showToolbar | boolean | true | 显示组件工具栏 |
showTaskTable | boolean | true | 显示左侧任务表 |
sidebarWidth | number | 320 | 任务表宽度 |
minSidebarWidth / maxSidebarWidth | number | 180 / 520 | 分栏限制 |
sidebarResizeStep | number | 8 | 分栏吸附步长 |
resizableSidebar | boolean | true | 允许拖动分栏 |
taskTableColumns | GanttReactTaskColumn[] | 内置三列 | 列显隐与宽度 |
rowHeight / barHeight / barMinWidth | number | 46 / 26 / 18 | 行与任务条几何 |
virtualizeRows / virtualizeColumns | boolean | true | 行与时间列虚拟化 |
rowVirtualizationThreshold | number | 120 | 行虚拟化阈值 |
columnVirtualizationThreshold | number | 180 | 时间列虚拟化阈值 |
rowOverscan / columnOverscan | number | 4 / 3 | 视口外预渲染窗口 |
显示、联动与动效
| 属性 | 类型 | 默认值 | 说明 |
|---|---|---|---|
showDependencies | boolean | true | 显示依赖线 |
showProgress | boolean | true | 显示进度层 |
showEdgeIndicators | boolean | true | 逐行显示左右视口外入口 |
gridStyle | 'line' | 'banded' | 'soft' | 'contrast' | 'line' | 网格模板 |
taskPattern | GanttPatternOptions | false | - | 全局任务条纹理 |
entryEffect | 'fade' | 'fade-slide' | 'scale-fade' | 'none' | 'fade-slide' | 新虚拟行入场 |
entryDuration | number | 180 | 入场毫秒数 |
groupId | string | - | 联动组 |
sync | 'none' | 'scroll' | 'view' | 'all' | 'none' | 联动范围 |
className / style | React 标准类型 | - | 根节点样式入口 |
Render Props
| 属性 | 参数 | 用途 |
|---|---|---|
renderTaskHeader | () | 任务表表头 |
renderTask | (task, rowIndex, selected) | 任务列 |
renderOwner | (task, rowIndex) | 负责人列 |
renderProgress | (task, progress) | 进度列 |
renderBar | GanttReactBarRenderContext | 任务条内容 |
renderDependency | GanttReactDependencyRenderContext | 完整依赖线 SVG |
renderEdgeIndicator | GanttReactEdgeRenderContext | 行级左右入口；调用 jump() 定位 |
renderEmpty | () | 空数据状态 |
事件
| 属性 | 载荷 | 说明 |
|---|---|---|
onViewChange | ViewPresetId | 维度变化 |
onTaskClick | GanttReactTaskClick | 单击任务行或任务条，source 区分来源 |
onTaskDoubleClick | (task, event) | 双击任务 |
onLinkDoubleClick | GanttReactLinkDoubleClick | 双击依赖线 |
onTaskChange | GanttReactTaskChange | 移动或缩放后的不可变建议值 |
onVisibleRangeChange | GanttReactVisibleRange | 当前日期与行窗口，适合远程分页 |
onSidebarWidthChange | number | 分栏宽度变化 |
实例方法
tsx
const gantt = useRef<YgGanttReactHandle>(null)
gantt.current?.focus({ strategy: 'dense', scope: 'viewport', windowDays: 14 })
gantt.current?.scrollToDate('2026-08-12')
gantt.current?.scrollTaskIntoView('design')
gantt.current?.scrollToRow(2400)
gantt.current?.fitToData()
gantt.current?.setView('month')
gantt.current?.selectTask('design')
gantt.current?.getAnchorDate()
gantt.current?.getRenderStats()getRenderStats() 返回总任务数、实际渲染行/列/依赖线数量，以及行列虚拟化是否开启。