跳到主要内容

React Gantt

React Gantt 是 DHTMLX Gantt 的官方 React 封装。它使你能够将甘特图作为一个 React 组件使用,同时仍然支持完整的配置 API。

如果你想要获得关于 React Gantt 的工作原理及其提供的功能的完整描述,请从 概览 开始。

入门​

AI 辅助开发

如果你使用 AI 代码助手, DHTMLX React Gantt agent skill 可以帮助它遵循正确的集成模式并避免常见错误。要获取实时 API 参考,请连接 DHTMLX MCP server。

如果你是该封装的新用户,请按以下顺序操作:

  1. 安装 - 选择 React Gantt 的 Evaluation(公开 npm)或 Professional(私有 npm)版本。
  2. 快速入门 - 渲染你的第一个甘热图并验证设置。
  3. 配置 - 了解如何使用 props、模板和事件处理程序。

框架集成​

如果你的应用是用元框架构建的,请使用下面的指南来获得框架相关的设置:

  • Next.js - 客户端组件设置与常见的 SSR 限制
  • Remix - 基于路由的设置与集成说明

选择数据绑定模型​

React Gantt 支持两种数据绑定方法:

  • React 管理的数据(大多数 React 应用的推荐方案) 你将任务/链接保存在 React 中或在状态管理器中,将它们作为 props 传递,并通过 data.save/data.batchSave 回调来处理更新。

  • Gantt 管理的数据(在专业化、对性能敏感的场景中有用) 你只需初始化数据一次,让 Gantt(以及你的后端)来拥有数据生命周期。React 不会在每次变更后重新应用更新的 props。

要理解这两种方法及其取舍,请阅读 数据绑定与状态管理基础。

数据与状态教程​

如果你使用状态管理库,数据绑定与状态管理 的指南展示了为每个库(Redux Toolkit、Zustand、MobX 等)实现的相同集成模式,以及与 Firebase 的实时同步。

示例与评估资源​

浏览公开的 React Gantt 示例,以查看包装器的可运行演示:

如果您正在评估 React Gantt,评估页面在评估期内提供技术支持。请参阅 安装。

Need help?
Got a question about the documentation? Reach out to our technical support team for help and guidance. For custom component solutions, visit the Services page.