Wie in der Einführung zu Scrivito angesprochen, werden CMS-Inhalte im Browser von React-Komponenten angezeigt. In dieser kurzen Anleitung erläutern wir, wie solche Komponenten beschaffen sein sollten.
Wie in der Einführung zu Scrivito angesprochen, werden CMS-Inhalte im Browser von React-Komponenten angezeigt. In dieser kurzen Anleitung erläutern wir, wie solche Komponenten beschaffen sein sollten.
Um ein CMS-Objekt oder Widget zu rendern, verwendet Scrivito die Komponente der Modellklasse, zu der das Objekt oder Widget gehört. Eine Komponente kann einer Objekt- oder Widget-Klasse mit Scrivito.provideComponent zugewiesen werden. Bei einer HeadlineWidget-Klasse zum Beispiel, die ein Attribut title hat, kann man Scrivito die Instanzen dieser Widget-Klasse mit einer geeigneten funktionalen Komponente rendern lassen:
Stattdessen könnten Sie auch eine Komponentenklasse zur Verfügung stellen, was jedoch nur empfehlenswert (und dann auch erforderlich) ist, wenn darin Zustände („state“) genutzt werden sollen:
Die bereitgestellte Komponente ist mit Scrivito verbunden, d.h. sie lädt automatisch die erforderlichen Daten vom Scrivito-Backend und aktualisiert sich auch, nachdem die Daten geändert wurden.
Eine eigenständige Komponente steht mit keiner bestimmten Modellklasse in Verbindung und kann daher einer solchen nicht zugewiesen werden. Solche Komponenten rendern Teile des Layouts, etwa Navigationen oder das Suchfeld und sollten auch mit Scrivito verbunden werden, damit deren Daten automatisch geladen und aktualisiert werden. Um dies zu erreichen, können Sie eine solche Komponente mit Hilfe von Scrivito.connect mit Scrivito verbinden:
CMS-Objekt- und -Widget-Daten werden asynchron vom Scrivito-Backend geladen. Scrivito.connect befreit Sie von der Notwendigkeit, auf ausstehende Daten zu warten. Es stellt auch sicher, dass eine Komponente neu gerendert wird, nachdem die Daten geladen oder aktualisiert wurden.
Wird auf Daten jedoch nicht beim Rendern zugegriffen, sondern beispielsweise in einem Event-Handler wie onClick, benötigen Sie Scrivito.load, um mit den im Hintergrund geladenen Daten konsistent arbeiten zu können.
… können Komponenten einer CMS-Modellklasse (für einen Seiten-, Ressourcen- oder Widget-Typ) mit Scrivito.provideComponent bereitgestellt werden. Übergeben Sie eine funktionale Komponente, es sei denn, es ist erforderlich, mit Zuständen umzugehen. In diesem Fall wird eine React.Component benötigt, die Sie dann an Scrivito.provideComponent übergeben können.
Eine Komponente, die nicht für eine CMS-Modellklasse gedacht ist, sollte stets als eine React.Component-Klasse angelegt und mittels Scrivito.connect mit Scrivito verbunden werden.