当前位置：首页 > news >正文

DHTMLX宣布推出支持 Redux、TypeScript 和 MUI 的 React Gantt甘特图控件

news 来源：原创 2025/4/26 21:04:10

在瞬息万变的 Web 开发领域，令人惊喜的是，React 依然是最受欢迎的前端框架，而甘特图则经常被选为现代项目管理应用的核心功能。DHTMLX 意识到，甘特图组件的现有用户和潜在客户对原生 React 体验的需求很高。为了满足这一需求，我们很高兴地宣布推出全新的 DHTMLX React 甘特图。

DHTMLX React Gantt 试用下载

全新 DHTMLX React Gantt 旨在帮助开发团队更轻松地在 React 项目中无缝实现功能丰富的甘特图。

React Gantt 的关键路径

DHTMLX React Gantt 针对最新的 React 版本（从 v18 开始）进行了优化，以充分利用现代 React 功能和性能优化。通过关注最新的 React 版本，我们确保提供更稳定、更易于维护的解决方案。

让我们了解一下在您的应用程序中使用此工具的主要好处。

常见的 React 方法

新的 DHTMLX 解决方案与 React 的原则和生命周期相一致，允许开发人员使用熟悉的 props 和 state 等概念构建强大的甘特图。props 支持甘特图组件的配置和修改，而 state 则负责处理实时交互和更新，从而确保动态且响应迅速的用户体验。

React Gantt 通过 npm 安装。以下是导入和渲染甘特图的示例：

import { useState } from 'react';
import ReactGantt from '@dhx/react-gantt';
import '@dhx/react-gantt/dist/react-gantt.css';
import { demoData } from './DemoData'export default function BasicGantt() {const [theme, setTheme] = useState("terrace");const [tasks, setTasks] = useState(demoData.tasks);const [links, setLinks] = useState(demoData.links);return (<div style={ { height: '500px' } }><ReactGantttasks={tasks}links={links}theme={theme}/></div>);
}

此外，新的 React 甘特图全面支持 TS，并允许在图表的各个部分使用 React 组件，让您能够利用丰富的 React 生态系统进行数据可视化。它还支持 React 的声明式数据处理，能够高效地管理和渲染复杂的调度数据，同时保持代码库的简洁易维护。

全面的功能集

您可能想知道全新 DHTMLX React Gantt 的功能。我们的 React Gantt 具备构建全面项目管理应用所需的一切功能，涵盖各种规模，从各种任务类型和依赖项等基础功能，到高级的自动调度、资源管理、关键路径等。事实上，全新 Gantt 解决方案允许您通过 API使用我们丰富的JavaScript Gantt库。

React Gantt 带资源面板

轻松定制和造型

React 甘特图的另一个显著优势是其可定制性。您可以使用 React 组件作为模板、灯箱表单或内联编辑器，根据各种需求调整默认甘特图配置。DHTMLX

React 甘特图中的深色主题

在下面的示例中，您可以看到如何在模板中使用 React 组件：

function PriorityBadge({ priority }) {return <span style={ { color: 'red' } }>{priority}</span>;
}<ReactGantttemplates={ {task_text: (start, end, task) => {return <PriorityBadge priority={task.priority} />;}} }
/>

在这段代码中，React 元素是从模板函数返回的。

还可以更改 React Gantt 图中其他元素的模板使用方式。

例如，下面是如何将自定义过滤器和 React 控件集成到网格的一列中：

const config: GanttConfig = {columns: [{ name: "text", tree: true, width: 240 },{ name: "start_date", width: 150, align: "center" },{ name: "duration", width: 80, align: "center" },{name: "custom",align: "center",label: <ColumnMenuonFilterSelected={handleFilterSelected}currentFilterLabel={filterLabel}/>,width: 160,template: (task: Task) => (<StatusButtonComponenttask={task}onClick={() => {toggleCompleted(task);}}/>)},{ name: "add", width: 44 },]
}

那么像编辑甘特图这样重要的方面呢？你可以在网格区域的内联编辑器中使用 React 组件。

以下是使用 React 构建的甘特图中内联编辑器的示例：

内联编辑器

DHTMLX React Gantt 中的内联编辑器

此外，您还可以将默认的任务编辑窗口（Lightbox）替换为基于 React 的模态框或任何其他组件。

有几种内置主题可用于更改甘特图的样式。主题可以通过theme属性启用，并按如下方式动态更改：

import { useEffect, useRef } from 'react';
import ReactGantt from "@dhx/react-gantt";
import "@dhx/react-gantt/dist/react-gantt.css";export default function BasicInitDemo() {const [theme, setTheme] = useState("terrace");const tasks = [.];const links = [...];const switchTheme = () => {setTheme((prevTheme) => (prevTheme === "terrace" ? "dark" : "terrace"));};return (<div style={ {height: '600px'} }><div><button onClick={switchTheme}>Switch Theme</button></div><ReactGantttasks={tasks}links={links}theme={theme}  /*!*//></div>);
};

如果需要，可以使用自定义样式和覆盖 CSS 变量进一步修改这些主题：

 :root {--dhx-gantt-task-background: #d96c49;--dhx-gantt-task-color: #fff;--dhx-gantt-task-border-radius: 8px;}

如果您觉得这还不足以满足您项目的样式需求，我们的 React Gantt 与 Material UI 兼容。您可以利用这个 CSS 框架的全面设计系统来创建符合任何应用程序样式特性的甘特图。

通过 TypeScript、Redux 和 SSR 框架兼容性增强 React Gantt

DHTMLX React Gantt 的构建着眼于未来，因为它与众多备受需求的技术兼容。

我们的 React Gantt 支持 TypeScript，让您能够利用静态类型、高级错误检测和更佳的代码可维护性。为了高效地管理甘特图数据的状态，您可以受益于与 Redux 库的集成。将 Redux 与 React Gantt 组件结合使用，您可以将甘特图设置集中管理和存储，与甘特图本身分离。这使得您可以从应用程序的其他部分读取和修改这些设置。

除此之外，我们的 React Gantt 还兼容 Next.js 和 Remix 框架。但是，由于甘特图依赖于 DOM 和浏览器 API，它们无法在服务器端完全渲染，因此您应该禁用 SSR 渲染以确保客户端的流畅运行。