Verwendung der DHTMLX Gantt-Eigenschaften in ReactGantt

Diese Seite beschreibt die von React Gantt akzeptierten Props und wie sie DHTMLX Gantt-Funktionen zugeordnet werden.

Verfügbare Props

Eigenschaft	Typ	Beschreibung
tasks	Task[]	Ein Array von Task-Objekten.
links	Link[]	Ein Array von Link-Objekten.
templates	GanttTemplates	Überschreibt gantt.templates, z. B.: task_text, task_class, scale_cell_class.
config	GanttConfig	In gantt.config zusammengeführt, z. B.: scales_config, columns_config, autosize_config.
calendars	Calendar[]	Ein Array von Arbeitskalendern. Beispiel: Arbeitskalender.
resources	Resource[]	Ein Array von Resource-Objekten.
baselines	Baseline[]	Ein Array von Baseline-Objekten.
markers	Marker[]	Ein Array von Marker-Objekten für Timeline-Marker.
plugins	GanttPlugins	Gantt-Erweiterungen, die aktiviert werden müssen (z. B.: critical_path, auto_scheduling).
data	( load?: string, save?: string|RouterFunction, batchSave?: BatchChanges)	Erlaubt das Laden von Daten über den integrierten Gantt-Transport und bietet Callback-Funktionen für Änderungen an den Gantt-Daten.
locale	string	Legt gantt.i18n.setLocale(locale) fest. Standardmäßig ist es "en".
theme	string	Anwendet gantt.setSkin(theme). Standardmäßig ist es "terrace".
customLightbox	ReactElement | null	Eine React-Komponente, die das integrierte Lightbox ersetzt (siehe Custom Lightbox.)
inlineEditors	( [editorType: string]: React.ComponentType )	Ermöglicht die Zuordnung Ihrer React-basierten Inline-Editoren zur DHTMLX-Inline-Editor-Schnittstelle.
groupTasks	GroupConfig | boolean | null	Gruppierungskonfigurationsobjekt oder false/null zum Deaktivieren der Gruppierung (siehe Grouping Tasks .).
filter	((task: Task) => boolean) | null	Eine Funktion, die verwendet wird, um Gantt-Aufgaben zu filtern.
resourceFilter	((resource: Resource) => boolean) | null	Eine Funktion, die verwendet wird, um Ressourcen für das Resource Panel. zu filtern.
modals	GanttModals	Ermöglicht das Ersetzen von onBeforeTaskDelete und onBeforeLinkDelete Modalen durch benutzerdefinierte Komponenten.
htmlTemplatePolicy	HtmlTemplatePolicy	Steuert, wie Zeichenfolgen, die von Template-Funktionen zurückgegeben werden, gerendert werden. "basic-sanitize" (Standard) erlaubt, das zurückgegebene HTML zu sanitizen: sichere Formatierung, Klassen, eingeschränkte Inline-Stile, data-*-Attribute und img bleiben erhalten, während Skripte, Ereignis-Handler und gefährliche URLs entfernt werden. "escape" rendert die Zeichenfolge als Text; "unsafe-html" rendert die Rohzeichenfolge (vor V10-Verhalten); ein benutzerdefiniertes Sanitizer-Objekt (mode: "sanitize" mit einer sanitize(html)-Funktion) erlaubt es, eine Bibliothek wie DOMPurify einzubinden. Für die Ein-Zeilen-Pro Vorlage stecken Sie einzelne Template-Funktionen mit dem exportierten allowRawHTML()-Hilfsprogramm ein. See Migration notes.
(Event Props)	Funktion	Der Wrapper unterstützt außerdem das Übergeben von Event-Handler-Props, die DHTMLX Gantt-Ereignissen entsprechen. Zum Beispiel onTaskClick, onAfterTaskAdd usw. Wenn der Prop-Name dem Ereignisnamen entspricht, wird es automatisch angehängt.

Type Exports

Das Paket @dhx/react-gantt re-exportsiert mehrere TypeScript-Typen, die Sie verwenden können, um Ihren Anwendungs-Code zu annotieren:

Export	Beschreibung
Task	Internes Gantt-Aufgaben-Objekt. Datumswerte sind Date-Objekte; umfasst $-präfixierte System-Eigenschaften. Verwenden Sie es in Ereignis-Handlern und beim Arbeiten mit Daten, die Gantt besitzt.
Link	Internes Gantt-Verbindungsobjekt. Verwenden Sie es in Ereignis-Handlern und beim Arbeiten mit Daten, die Gantt besitzt.
SerializedTask	Vom Benutzer sichtbare Aufgaben-Struktur für Store-Zustand, anfängliche Daten und Payloads von Save-Callbacks. Datumsfelder akzeptieren `Date
SerializedLink	Vom Benutzer sichtbare Verbindungs-Struktur für Store-Zustand, anfängliche Daten und Payloads von Save-Callbacks.

Wann API-Task/Link-Objekte vs SerializedTask/SerializedLink verwenden:

• SerializedTask / SerializedLink – für Daten, die Sie besitzen: Store-Zustand, API-Antworten, anfängliche Daten-Literale. Datumsfelder akzeptieren Strings (z. B. ISO-Daten).
• Task / Link – für Daten, die Gantt besitzt: innerhalb von Ereignis-Handlern, nachdem Gantt die Daten geparst hat. Datumsfelder sind Date-Objekte. Task enthält $-präfixierte interne Eigenschaften.

Beispielverwendung

<ReactGantt
  tasks={tasks}
  links={links}
  theme="material"
  locale="en"
  config={{
    scales: [
      { unit: "year", step: 1, format: "%Y" },
      { unit: "month", step: 1, format: "%M" }
    ],
    columns: [
      { name: "text", tree: true, width: '*' },
      { name: "start_date", align: "center" },
      { name: "duration", align: "center" },
      { name: "add" }
    ],
    // any other gantt.config you want
  }}
  onTaskClick={(id, e) => {
    console.log('Task clicked:', id);
    return true; 
  }}
  templates={{
    task_text: (start, end, task) => `#${task.id}: ${task.text}`,
  }}
/>

Verwendung von Event-Props

Sie können jedes DHTMLX Gantt-Ereignis als Prop übergeben. Zum Beispiel:

<ReactGantt

  onTaskClick={(id, e) => {
    console.log('Task clicked:', id);
    return true; 
  }}

/>

Internally, der Wrapper ruft gantt.attachEvent("onBeforeTaskAdd", handler) auf, wenn Sie ein Prop mit dem Namen onBeforeTaskAdd übergeben. Für eine vollständige Ereignisliste siehe DHTMLX Gantt API.

Kombination von Props und der DHTMLX API

Bibliothek @dhx/react-gantt ist darauf ausgelegt, so deklarativ wie möglich für den Alltag zu sein – die meisten Anwendungsfälle lassen sich über die Standard-Props lösen (wie tasks, links, resources, templates usw.). Es kann jedoch Situationen geben, in denen Sie tieferen Zugriff auf die Gantt-Engine benötigen. Beispielsweise für:

• Arbeitszeitberechnungen
• [Auto-Scheduling]-Logik oder fortgeschrittene Funktionen wie Ressourcenberechnungen
• Aufruf spezieller Methoden der Gantt API

In diesen Fällen können Sie zwei zusätzliche Ansätze verwenden, um Zugriff auf die zugrunde liegende DHTMLX Gantt-Funktionalität zu erhalten:

• React-Hooks, die speziell vom Wrapper bereitgestellt werden, um Gantts Datenspeicher- und Planungslogik zu überbrücken

• Direkter Zugriff auf die Gantt-Instanz über eine Ref, falls die integrierten Hooks nicht alle Bedürfnisse abdecken

Verwendung integrierter Hooks

Die Bibliothek @dhx/react-gantt stellt Hooks für Ereignisabonnements, Ressourcenverwaltung, Zugriff auf Datenspeicher, Undo/Redo, Zoom, Selektion und Arbeitszeitsberechnungen bereit.

Siehe die专 dedicierte Seite Hooks für die vollständige Referenz, einschließlich:

• useGanttEvent – Ereignisabonnements mit Lifecycle-Management
• useResourceAssignments – Abfragen und Mutationen von Ressourcen-Zuweisungen
• useGanttDatastore – schreibgeschützter Zugriff auf den Datenspeicher
• useUndoRedo – Undo/Redo-Status und -Aktionen
• useZoom – Zoom-Steuerung und -Status
• useSelection – Verfolgung der Aufgaben-Selektion
• useWorkTime – Arbeitszeitsberechnungen

Direkter Zugriff auf Gantt-Instanz mit Ref

Während Hooks die meisten fortgeschrittenen Bedürfnisse abdecken, möchten Sie möglicherweise dennoch direkten Zugriff auf die gesamte Gantt-Instanz haben. Dafür bleibt der Ref-Ansatz verfügbar:

import { useRef, useEffect } from 'react';
import ReactGantt, { ReactGanttRef } from '@dhx/react-gantt';

export function DirectRefExample({ tasks, links }) {
  const ganttRef = useRef<ReactGanttRef>(null);

  useEffect(() => {
    const gantt = ganttRef.current?.instance;
    if (!gantt) return;
    gantt.showDate(new Date());
  }, []);

  return <ReactGantt ref={ganttRef} tasks={tasks} links={links} />;
}

Hinweis

Wenn Sie Aufgaben oder Links über die direkte Gantt-Instanz ändern und sie gleichzeitig als React-Props liefern, halten Sie sie synchron. Andernfalls könnte das nächste React-Re-Render Ihre manuellen Änderungen überschreiben.

Siehe Accessing the Underlying Gantt API für weitere Details.