Integration mit React
Machen Sie sich mit den grundlegenden Konzepten und Mustern von React vertraut, bevor Sie diese Dokumentation lesen. Zur Auffrischung Ihres Wissens lesen Sie die React-Dokumentation.
DHTMLX To Do List ist mit React kompatibel. Die folgenden Beispiele zeigen, wie Sie beide zusammen verwenden. Ein vollständiges Projekt finden Sie im Beispiel auf GitHub.
Projekt erstellen
Erstellen Sie ein neues React-Projekt und installieren Sie die Abhängigkeiten.
Erstellen Sie ein einfaches React-Projekt oder verwenden Sie React mit Vite. Das folgende Beispiel benennt das Projekt my-react-todo-app:
npx create-react-app my-react-todo-app
Abhängigkeiten installieren
Wechseln Sie in das neu erstellte App-Verzeichnis:
cd my-react-todo-app
Installieren Sie die Abhängigkeiten und starten Sie den Entwicklungsserver mit einem Paketmanager.
Führen Sie folgende Befehle mit yarn aus:
yarn
yarn start
Führen Sie folgende Befehle mit npm aus:
npm install
npm start
Die App läuft unter einer Localhost-Adresse (z. B. http://localhost:3000).
To-Do-Liste erstellen
Stoppen Sie die App und installieren Sie das To-Do-List-Paket.
Schritt 1. Paket installieren
Laden Sie das To-Do-List-Testpaket herunter und folgen Sie den Anweisungen in der README-Datei. Die Testversion ist nur 30 Tage lang verfügbar.
Schritt 2. Komponente erstellen
Erstellen Sie eine React-Komponente, um die To-Do-Liste mit der Toolbar in die Anwendung einzubinden. Fügen Sie im Verzeichnis src/ eine neue Datei namens ToDo.jsx hinzu.
Quelldateien importieren
Öffnen Sie ToDo.jsx und importieren Sie die Quelldateien der To-Do-Liste. Wählen Sie einen der beiden Importpfade:
- PRO-Version aus einem lokalen Ordner installiert — Import aus
dhx-todolist-package - Testversion — Import aus
@dhx/trial-todolist
Das folgende Beispiel importiert aus dem PRO-Paket:
import { ToDo, Toolbar } from 'dhx-todolist-package';
import 'dhx-todolist-package/dist/todo.css';
Je nach Paket können die Quelldateien minifiziert sein. Importieren Sie die CSS-Datei in diesem Fall als todo.min.css.
Das folgende Snippet importiert aus dem Testpaket:
import { ToDo, Toolbar } from '@dhx/trial-todolist';
import "@dhx/trial-todolist/dist/todo.css";
Dieses Tutorial verwendet die Testversion.
Container festlegen und To-Do-Liste mit Toolbar hinzufügen
Um die To-Do-Liste mit der Toolbar auf der Seite anzuzeigen, erstellen Sie Container für beide Komponenten und initialisieren Sie diese mit den Konstruktoren. Das folgende Beispiel rendert beide Container und initialisiert die Komponenten innerhalb von useEffect:
import { useEffect, useRef } from "react";
import { ToDo, Toolbar } from "@dhx/trial-todolist";
import "@dhx/trial-todolist/dist/todo.css"; // To-Do-List-Styles einbinden
export default function ToDoComponent(props) {
let toolbar_container = useRef(); // Container für Toolbar initialisieren
let todo_container = useRef(); // Container für To-Do-Liste initialisieren
useEffect(() => {
// To-Do-List-Komponente initialisieren
const todo = new ToDo(todo_container.current, {});
// Toolbar-Komponente initialisieren
const toolbar = new Toolbar(toolbar_container.current, {
api: todo.api, // innere API der To-Do-Liste bereitstellen
// weitere Konfigurationseigenschaften
});
return () => {
todo.destructor(); // To-Do-Liste zerstören
toolbar.destructor(); // Toolbar zerstören
};
}, []);
return <div className="component_container">
<div ref={toolbar_container}></div>
<div ref={todo_container} className="widget"></div>
</div>
}
Styles hinzufügen
Richten Sie Styles ein, damit die To-Do-Liste korrekt dargestellt wird. Verwenden Sie die Datei index.css, um Styles für die To-Do-Liste und ihre Container festzulegen. Das folgende Beispiel definiert Layout-Abmessungen für die Seite:
/* Styles für die Ausgangsseite */
html,
body,
#root {
height: 100%;
padding: 0;
margin: 0;
background-color: #f7f7f7;
}
/* Styles für den To-Do-List- und Toolbar-Container */
.component_container {
height: 100%;
max-width: 800px;
margin: 0 auto;
}
/* Styles für den To-Do-List-Container */
.widget {
height: calc(100% - 56px);
}
Daten laden
Erstellen Sie die Datei data.js im Verzeichnis src/ und fügen Sie Daten hinzu. Das folgende Beispiel exportiert eine getData()-Funktion, die Aufgaben, Benutzer und Projekte zurückgibt:
export function getData() {
const tasks = [
{
id: "temp://1652991560212",
project: "introduction",
text: "Greetings, everyone! \u{1F44B} \nI'm DHTMLX To Do List.",
priority: 1
},
{
id: "1652374122964",
project: "introduction",
text: "You can assign task performers and due dates using the menu.",
assigned: ["user_4", "user_1", "user_2", "user_3"],
due_date: "2033-03-08T21:00:00.000Z",
priority: 2
},
// ...
];
const users = [
{
id: "user_1",
label: "Don Smith",
avatar:
"https://snippet.dhtmlx.com/codebase/data/common/img/02/avatar_61.jpg"
},
// ...
];
const projects = [
{
id: "introduction",
label: "Introduction to DHTMLX To Do List"
},
{
id: "widgets",
label: "Our widgets"
}
];
return { tasks, users, projects };
}
Öffnen Sie App.js und importieren Sie die Daten. Übergeben Sie die Daten als Props an die <ToDo/>-Komponente, wie unten gezeigt:
import ToDo from "./ToDo";
import { getData } from "./data";
function App() {
const { tasks, users, projects } = getData();
return <ToDo tasks={tasks} users={users} projects={projects} />;
}
export default App;
Öffnen Sie ToDo.jsx und wenden Sie die übergebenen Props auf das Konfigurationsobjekt der To-Do-Liste an. Das folgende Snippet übergibt Benutzer-, Aufgaben- und Projektdaten über die Konfiguration:
import { useEffect, useRef } from "react";
import { ToDo, Toolbar } from "@dhx/trial-todolist";
import "@dhx/trial-todolist/dist/todo.css";
export default function ToDoComponent(props) {
let todo_container = useRef();
let toolbar_container = useRef();
useEffect(() => {
const todo = new ToDo(todo_container.current, {
users: props.users,
tasks: props.tasks,
projects: props.projects,
// weitere Konfigurationseigenschaften
});
const toolbar = new Toolbar(toolbar_container.current, {
api: todo.api,
// weitere Konfigurationseigenschaften
});
return () => {
todo.destructor();
toolbar.destructor();
};
}, []);
return <div className="component_container">
<div ref={toolbar_container}></div>
<div ref={todo_container} className="widget"></div>
</div>
}
Sie können auch die Methode parse() innerhalb von useEffect() verwenden, um Daten in die To-Do-Liste zu laden. Das folgende Beispiel lädt Daten nach der Initialisierung mit parse():
import { useEffect, useRef } from "react";
import { ToDo, Toolbar } from "@dhx/trial-todolist";
import "@dhx/trial-todolist/dist/todo.css";
export default function ToDoComponent(props) {
let todo_container = useRef();
let toolbar_container = useRef();
let tasks = props.tasks;
let users = props.users;
let projects = props.projects;
useEffect(() => {
const todo = new ToDo(todo_container.current, {});
const toolbar = new Toolbar(toolbar_container.current, {
api: todo.api,
// weitere Konfigurationseigenschaften
});
todo.parse({ tasks, users, projects });
return () => {
todo.destructor();
toolbar.destructor();
};
}, []);
return <div className="component_container">
<div ref={toolbar_container}></div>
<div ref={todo_container} className="widget"></div>
</div>
}
Jeder Aufruf von parse(data) ersetzt den aktuellen Datensatz.
Die Komponente rendert jetzt eine befüllte To-Do-Liste. Weitere verfügbare Eigenschaften finden Sie in der Konfigurationsübersicht.
Events verarbeiten
Abonnieren Sie Events, um auf Benutzeraktionen zu reagieren. Siehe die vollständige Event-Liste.
Öffnen Sie ToDo.jsx und vervollständigen Sie die Methode useEffect(). Das folgende Snippet registriert einen Handler für das add-task-Event:
// ...
useEffect(() => {
const todo = new ToDo(todo_container.current, {});
todo.api.on("add-task", (obj) => {
console.log("A new task is added", obj);
});
return () => {
todo.destructor();
};
}, []);
// ...
Schritt 3. To-Do-Liste in die App einbinden
Um die Komponente in die App einzubinden, öffnen Sie App.js und ersetzen Sie den Standard-Code durch das folgende Snippet:
import ToDo from "./ToDo";
import { getData } from "./data";
function App() {
const { tasks, users, projects } = getData();
return <ToDo tasks={tasks} users={users} projects={projects} />;
}
export default App;
Starten Sie die App — die To-Do-Liste wird mit Beispieldaten gerendert:
Das vollständige Projekt finden Sie auf GitHub.