半岛权威十大直营(官方)网站

在瞬息万变的 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' } }>
      <ReactGantt
        tasks={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>;
}

<ReactGantt
  templates={ {
    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: <ColumnMenu
        onFilterSelected={handleFilterSelected}
        currentFilterLabel={filterLabel}
      />,
      width: 160,
      template: (task: Task) => (
        <StatusButtonComponent
          task={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>
      <ReactGantt
        tasks={tasks}
        links={links}
        theme={theme}  /*!*/
      />
    </div>
  );
};

 :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 渲染以确保客户端的流畅运行。

只需支付一份甘特图，即可获得两份

最后，同样重要的是，选择商业版、企业版和旗舰版 DHTMLX Gantt 的新 DHTMLX 客户将以相同的价格获得 JS 和 React Gantt 版本！如需了解详情，请。

关于慧都科技：

慧都科技是专注软件工程、智能制造、石油工程三大行业的数字化解决方案服务商。在软件工程领域，我们提供开发控件、研发管理、代码开发、部署运维等软件开发全链路所需的产品，提供正版授权采购、技术选型、个性化维保等服务，帮助客户实现技术合规、降本增效与风险可控。慧都科技DHTMLX在中国的官方授权代理商，提供DHTMLX系列产品免费试用，咨询，正版销售等于一体的专业化服务。DHTMLX专注于JavaScript和HTML5 UI小部件和库，以帮助开发人员更快地构建功能丰富的、交互式的Web界面。 遵循现代网络开发的标准和做法，DHTMLX提供针对桌面和移动设备定制的优秀Web应用程序框架。

下载|体验更多DHTMLX，请咨询，或拨打产品热线：023-68661681