如何在React中集成具备完整功能的jQuery版Kendo Gantt Chart

步骤1：安装必要依赖 #

首先安装项目所需的包：

npm install jquery @progress/kendo-ui
# 或使用yarn
yarn add jquery @progress/kendo-ui

步骤2：创建React组件并集成Kendo Gantt #

下面是一个完整的组件示例，包含初始化Kendo Gantt的核心逻辑：

import React, { useEffect, useRef } from 'react';
import $ from 'jquery';
// 引入Kendo Gantt的默认主题样式
import '@progress/kendo-ui/css/web/kendo.default-v2.min.css';
// 引入Kendo Gantt核心模块
import '@progress/kendo-ui/js/kendo.gantt';

const KendoGantt = () => {
  const ganttContainerRef = useRef(null);

  useEffect(() => {
    if (!ganttContainerRef.current) return;

    // 初始化Kendo Gantt，启用拖拽调度等完整功能
    $(ganttContainerRef.current).kendoGantt({
      dataSource: [
        {
          id: 1,
          orderId: 0,
          parentId: null,
          title: '项目总任务',
          start: new Date('2024/6/1'),
          end: new Date('2024/6/15'),
          percentComplete: 0.3,
          expanded: true
        },
        {
          id: 2,
          orderId: 1,
          parentId: 1,
          title: '子任务1',
          start: new Date('2024/6/1'),
          end: new Date('2024/6/8'),
          percentComplete: 0.6
        },
        {
          id: 3,
          orderId: 2,
          parentId: 1,
          title: '子任务2',
          start: new Date('2024/6/9'),
          end: new Date('2024/6/15'),
          percentComplete: 0.4
        }
      ],
      dependencies: [
        {
          predecessorId: 2,
          successorId: 3,
          type: 1
        }
      ],
      columns: [
        { field: 'title', title: '任务名称', width: '250px' },
        { field: 'start', title: '开始日期' },
        { field: 'end', title: '结束日期' }
      ],
      views: ['day', 'week', 'month'],
      height: 600,
      // 开启拖拽、调整时长等编辑功能
      editable: {
        move: true,
        resize: true,
        edit: true
      }
    });

    // 组件卸载时销毁Kendo实例，避免内存泄漏
    return () => {
      const ganttInstance = $(ganttContainerRef.current).data('kendoGantt');
      if (ganttInstance) ganttInstance.destroy();
    };
  }, []);

  return <div ref={ganttContainerRef} id="gantt"></div>;
};

export default KendoGantt;

关键注意事项 #

• DOM操作隔离：不要让React和jQuery同时操作同一DOM元素，所有Gantt相关操作尽量通过Kendo官方API完成。
• 样式适配：如果项目有自定义主题，可以替换引入的Kendo样式文件，确保组件显示正常。
• 状态同步：若需将Gantt的数据同步到React状态，可监听Gantt的change、save等事件，在回调中更新React状态。
• 实例管理：组件卸载时必须销毁Kendo实例，防止内存泄漏。

内容的提问来源于stack exchange，提问作者SHUBHAM SINGH