Integration mit React
Bevor Sie diese Dokumentation lesen, sollten Sie mit den grundlegenden Konzepten und Mustern von React vertraut sein. Besuchen Sie zur Auffrischung bitte die React Dokumentation.
DHTMLX Kanban ist mit React kompatibel. Wir haben Codebeispiele vorbereitet, wie Sie DHTMLX Kanban mit React verwenden können. Weitere Informationen finden Sie im entsprechenden Beispiel auf GitHub.
Ein Projekt erstellen
Sie können ein Standard-React-Projekt erstellen oder React mit Vite verwenden. Nennen wir das Projekt my-react-kanban-app:
npx create-react-app my-react-kanban-app
Abhängigkeiten installieren
Wechseln Sie in das neu erstellte App-Verzeichnis:
cd my-react-kanban-app
Installieren Sie die Abhängigkeiten und starten Sie den Entwicklungsserver mit einem Paketmanager:
- Wenn Sie yarn verwenden, führen Sie Folgendes aus:
yarn
yarn start
- Wenn Sie npm verwenden, führen Sie Folgendes aus:
npm install
npm run dev
Die App sollte nun auf einem lokalen Server laufen (z.B. http://localhost:3000).
Kanban erstellen
Nun sollten Sie den Quellcode von DHTMLX Kanban erhalten. Beenden Sie zunächst die App und installieren Sie das Kanban-Paket.
Schritt 1. Paket installieren
Laden Sie das Trial-Kanban-Paket herunter und befolgen Sie die Schritte in der README-Datei. Beachten Sie, dass die Testversion von Kanban nur 30 Tage verfügbar ist.
Schritt 2. Komponente erstellen
Jetzt müssen Sie eine React-Komponente erstellen, um ein Kanban zum Projekt hinzuzufügen. Erstellen Sie eine neue Datei im Verzeichnis src/ und nennen Sie sie Kanban.jsx.
Quelldateien importieren
Öffnen Sie die Datei Kanban.jsx und importieren Sie die Kanban-Quelldateien. Beachten Sie dabei:
- Wenn Sie die PRO-Version nutzen und das Kanban-Paket aus einem lokalen Ordner installiert haben, sehen die Importpfade wie folgt aus:
import { Kanban, Toolbar } from 'dhx-kanban-package';
import 'dhx-kanban-package/dist/kanban.css';
Beachten Sie, dass je nach verwendetem Paket die Quelldateien minifiziert sein können. In diesem Fall stellen Sie sicher, dass Sie die CSS-Datei als kanban.min.css importieren.
- Wenn Sie die Testversion von Kanban verwenden, geben Sie folgende Pfade an:
import { Kanban, Toolbar } from '@dhx/trial-kanban';
import "@dhx/trial-kanban/dist/kanban.css";
In diesem Tutorial sehen Sie, wie Sie die Testversion von Kanban konfigurieren.
Container einrichten und Kanban mit Toolbar hinzufügen
Um Kanban mit Toolbar auf der Seite anzuzeigen, müssen Sie Container für Kanban und Toolbar anlegen und diese mit den entsprechenden Konstruktoren initialisieren:
import { useEffect, useRef } from "react";
import { Kanban, Toolbar } from '@dhx/trial-kanban';
import '@dhx/trial-kanban/dist/kanban.css'; // Kanban-Stile einbinden
export default function KanbanComponent(props) {
let toolbar_container = useRef(); // Container für Toolbar initialisieren
let kanban_container = useRef(); // Container für Kanban initialisieren
useEffect(() => {
// Kanban-Komponente initialisieren
const kanban = new Kanban(kanban_container.current, {});
// Toolbar-Komponente initialisieren
const toolbar = new Toolbar(toolbar_container.current, {
api: kanban.api, // Kanban-internes API bereitstellen
// weitere Konfigurationseigenschaften
});
return () => {
kanban.destructor(); // Kanban zerstören
toolbar.destructor(); // Toolbar zerstören
};
}, []);
return <div className="component_container">
<div ref={toolbar_container}></div>
<div ref={kanban_container} className="widget"></div>
</div>
}
Stile hinzufügen
Damit Kanban korrekt angezeigt wird, müssen Sie die wichtigsten Stile für Kanban und seinen Container in der Haupt-CSS-Datei des Projekts festlegen:
/* Stile für die Startseite festlegen */
html,
body,
#root {
height: 100%;
padding: 0;
margin: 0;
}
/* Stile für Kanban- und Toolbar-Container */
.component_container {
height: 100%;
margin: 0 auto;
}
/* Stile für Kanban-Container */
.widget {
height: calc(100% - 56px);
}
Daten laden
Um Daten in das Kanban zu laden, müssen Sie einen Datensatz bereitstellen. Sie können die Datei data.js im Verzeichnis src/ anlegen und einige Daten hinzufügen:
export function getData() {
const columns = [
{
label: "Backlog",
id: "backlog"
},
{
label: "In progress",
id: "inprogress"
},
// ...
];
const cards = [
{
id: 1,
label: "Integration with Angular/React",
priority: 1,
color: "#65D3B3",
start_date: new Date("01/07/2021"),
users: [3, 2],
column: "backlog",
type: "feature",
},
{
label: "Archive the cards/boards ",
priority: 3,
color: "#58C3FE",
users: [4],
progress: 1,
column: "backlog",
type: "feature",
},
// ...
];
const rows = [
{
label: "Feature",
id: "feature",
},
{
label: "Task",
id: "task",
}
];
return { columns, cards, rows };
}
Öffnen Sie dann App.js und importieren Sie die Daten. Danach können Sie die Daten per props an die neue <Kanban/>-Komponente übergeben:
import Kanban from "./Kanban";
import { getData } from "./data";
function App() {
const { columns, cards, rows } = getData();
return <Kanban columns={columns} cards={cards} rows={rows} />;
}
export default App;
Öffnen Sie Kanban.jsx und wenden Sie die übergebenen props auf das Kanban-Konfigurationsobjekt an:
import { useEffect, useRef } from "react";
import { Kanban, Toolbar } from "@dhx/trial-kanban";
import "@dhx/trial-kanban/dist/kanban.css";
export default function KanbanComponent(props) {
let kanban_container = useRef();
let toolbar_container = useRef();
useEffect(() => {
const kanban = new Kanban(kanban_container.current, {
columns: props.columns, // Spalten-Daten anwenden
cards: props.cards, // Karten-Daten anwenden
rows: props.rows, // Zeilen-Daten anwenden
rowKey: "type",
// weitere Konfigurationseigenschaften
});
const toolbar = new Toolbar(toolbar_container.current, {
api: kanban.api,
// weitere Konfigurationseigenschaften
});
return () => {
kanban.destructor();
toolbar.destructor();
};
}, []);
return <div className="component_container">
<div ref={toolbar_container}></div>
<div ref={kanban_container} className="widget"></div>
</div>
}
Sie können auch die setConfig()- oder parse()-Methode innerhalb der useEffect()-Methode von React verwenden, um Daten in Kanban zu laden. Die setConfig- oder parse()-Methode ermöglicht das Neuladen der Daten bei jeder vorgenommenen Änderung.
import { useEffect, useRef } from "react";
import { Kanban, Toolbar } from "@dhx/trial-kanban";
import "@dhx/trial-kanban/dist/kanban.css";
export default function KanbanComponent(props) {
let kanban_container = useRef();
let toolbar_container = useRef();
let columns = props.columns; // Daten für Spalten
let cards = props.cards; // Daten für Karten
let rows = props.rows; // Daten für Zeilen
useEffect(() => {
const kanban = new Kanban(kanban_container.current, {
columns: [],
cards: [],
rows: [],
rowKey: "type",
// weitere Konfigurationseigenschaften
});
const toolbar = new Toolbar(toolbar_container.current, {
api: kanban.api,
// weitere Konfigurationseigenschaften
});
kanban.setConfig({ columns, cards, rows });
// oder kanban.parse({ columns, cards, rows });
return () => {
kanban.destructor();
toolbar.destructor();
};
}, []);
return <div className="component_container">
<div ref={toolbar_container}></div>
<div ref={kanban_container} className="widget"></div>
</div>
}
Nun ist die Kanban-Komponente einsatzbereit. Wenn das Element zur Seite hinzugefügt wird, wird Kanban mit Daten initialisiert. Sie können auch weitere Konfigurationseinstellungen vornehmen. Besuchen Sie unsere Kanban API-Dokumentation, um die vollständige Liste der verfügbaren Eigenschaften zu sehen.
Ereignisse behandeln
Wenn ein Benutzer eine Aktion im Kanban ausführt, wird ein Ereignis ausgelöst. Sie können diese Ereignisse nutzen, um die Aktion zu erkennen und den gewünschten Code auszuführen. Sehen Sie sich die vollständige Liste der Ereignisse an.
Öffnen Sie Kanban.jsx und ergänzen Sie die useEffect()-Methode wie folgt:
// ...
useEffect(() => {
const kanban = new Kanban(kanban_container.current, {});
kanban.api.on("add-card", (obj) => {
console.log(obj.columnId);
});
return () => {
kanban.destructor();
};
}, []);
// ...
Danach können Sie die App starten, um Kanban mit Daten auf einer Seite zu sehen.
Jetzt wissen Sie, wie Sie DHTMLX Kanban mit React integrieren können. Sie können den Code nach Ihren spezifischen Anforderungen anpassen. Das endgültige, erweiterte Beispiel finden Sie auf GitHub.