在瞬息萬變的 Web 開發(fā)領(lǐng)域，令人驚喜的是，React 依然是最受歡迎的前端框架，而甘特圖則經(jīng)常被選為現(xiàn)代項(xiàng)目管理應(yīng)用的核心功能。DHTMLX 意識到，甘特圖組件的現(xiàn)有用戶和潛在客戶對原生 React 體驗(yàn)的需求很高。為了滿足這一需求，我們很高興地宣布推出全新的 DHTMLX React 甘特圖。

DHTMLX React Gantt 試用下載

全新 DHTMLX React Gantt 旨在幫助開發(fā)團(tuán)隊(duì)更輕松地在 React 項(xiàng)目中無縫實(shí)現(xiàn)功能豐富的甘特圖。

React Gantt 的關(guān)鍵路徑

DHTMLX React Gantt 針對最新的 React 版本（從 v18 開始）進(jìn)行了優(yōu)化，以充分利用現(xiàn)代 React 功能和性能優(yōu)化。通過關(guān)注最新的 React 版本，我們確保提供更穩(wěn)定、更易于維護(hù)的解決方案。

讓我們了解一下在您的應(yīng)用程序中使用此工具的主要好處。

常見的 React 方法

新的 DHTMLX 解決方案與 React 的原則和生命周期相一致，允許開發(fā)人員使用熟悉的 props 和 state 等概念構(gòu)建強(qiáng)大的甘特圖。props 支持甘特圖組件的配置和修改，而 state 則負(fù)責(zé)處理實(shí)時(shí)交互和更新，從而確保動(dòng)態(tài)且響應(yīng)迅速的用戶體驗(yàn)。

React Gantt 通過 npm 安裝。以下是導(dǎo)入和渲染甘特圖的示例：

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，并允許在圖表的各個(gè)部分使用 React 組件，讓您能夠利用豐富的 React 生態(tài)系統(tǒng)進(jìn)行數(shù)據(jù)可視化。它還支持 React 的聲明式數(shù)據(jù)處理，能夠高效地管理和渲染復(fù)雜的調(diào)度數(shù)據(jù)，同時(shí)保持代碼庫的簡潔易維護(hù)。

全面的功能集

您可能想知道全新 DHTMLX React Gantt 的功能。我們的 React Gantt 具備構(gòu)建全面項(xiàng)目管理應(yīng)用所需的一切功能，涵蓋各種規(guī)模，從各種任務(wù)類型和依賴項(xiàng)等基礎(chǔ)功能，到高級的自動(dòng)調(diào)度、資源管理、關(guān)鍵路徑等。事實(shí)上，全新 Gantt 解決方案允許您通過 API使用我們豐富的JavaScript Gantt庫。

React Gantt 帶資源面板

輕松定制和造型

React 甘特圖的另一個(gè)顯著優(yōu)勢是其可定制性。您可以使用 React 組件作為模板、燈箱表單或內(nèi)聯(lián)編輯器，根據(jù)各種需求調(diào)整默認(rèn)甘特圖配置。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 元素是從模板函數(shù)返回的。

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

例如，下面是如何將自定義過濾器和 React 控件集成到網(wǎng)格的一列中：

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 },
  ]
}

那么像編輯甘特圖這樣重要的方面呢？你可以在網(wǎng)格區(qū)域的內(nèi)聯(lián)編輯器中使用 React 組件。

以下是使用 React 構(gòu)建的甘特圖中內(nèi)聯(lián)編輯器的示例：
DHTMLX React Gantt 中的內(nèi)聯(lián)編輯器

此外，您還可以將默認(rèn)的任務(wù)編輯窗口（Lightbox）替換為基于 React 的模態(tài)框或任何其他組件。

有幾種內(nèi)置主題可用于更改甘特圖的樣式。主題可以通過theme屬性啟用，并按如下方式動(dòng)態(tài)更改：

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;
 }

如果您覺得這還不足以滿足您項(xiàng)目的樣式需求，我們的 React Gantt 與 Material UI 兼容。您可以利用這個(gè) CSS 框架的全面設(shè)計(jì)系統(tǒng)來創(chuàng)建符合任何應(yīng)用程序樣式特性的甘特圖。

通過 TypeScript、Redux 和 SSR 框架兼容性增強(qiáng) React Gantt

DHTMLX React Gantt 的構(gòu)建著眼于未來，因?yàn)樗c眾多備受需求的技術(shù)兼容。

我們的 React Gantt 支持 TypeScript，讓您能夠利用靜態(tài)類型、高級錯(cuò)誤檢測和更佳的代碼可維護(hù)性。為了高效地管理甘特圖數(shù)據(jù)的狀態(tài)，您可以受益于與 Redux 庫的集成。將 Redux 與 React Gantt 組件結(jié)合使用，您可以將甘特圖設(shè)置集中管理和存儲，與甘特圖本身分離。這使得您可以從應(yīng)用程序的其他部分讀取和修改這些設(shè)置。

除此之外，我們的 React Gantt 還兼容 Next.js 和 Remix 框架。但是，由于甘特圖依賴于 DOM 和瀏覽器 API，它們無法在服務(wù)器端完全渲染，因此您應(yīng)該禁用 SSR 渲染以確?？蛻舳说牧鲿尺\(yùn)行。

只需支付一份甘特圖，即可獲得兩份

最后，同樣重要的是，選擇商業(yè)版、企業(yè)版和旗艦版 DHTMLX Gantt 的新 DHTMLX 客戶將以相同的價(jià)格獲得 JS 和 React Gantt 版本！如需了解詳情，請。

關(guān)于慧都科技：

慧都科技是專注軟件工程、智能制造、石油工程三大行業(yè)的數(shù)字化解決方案服務(wù)商。在軟件工程領(lǐng)域，我們提供開發(fā)控件、研發(fā)管理、代碼開發(fā)、部署運(yùn)維等軟件開發(fā)全鏈路所需的產(chǎn)品，提供正版授權(quán)采購、技術(shù)選型、個(gè)性化維保等服務(wù)，幫助客戶實(shí)現(xiàn)技術(shù)合規(guī)、降本增效與風(fēng)險(xiǎn)可控?；鄱伎萍?span style="color:#FF9900;">DHTMLX在中國的官方授權(quán)代理商，提供DHTMLX系列產(chǎn)品免費(fèi)試用，咨詢，正版銷售等于一體的專業(yè)化服務(wù)。DHTMLX專注于JavaScript和HTML5 UI小部件和庫，以幫助開發(fā)人員更快地構(gòu)建功能豐富的、交互式的Web界面。 遵循現(xiàn)代網(wǎng)絡(luò)開發(fā)的標(biāo)準(zhǔn)和做法，DHTMLX提供針對桌面和移動(dòng)設(shè)備定制的優(yōu)秀Web應(yīng)用程序框架。

下載|體驗(yàn)更多DHTMLX，請咨詢，或撥打產(chǎn)品熱線：023-68661681