在瞬息萬變的 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