In einer auf Scrivito basierenden Webanwendung sind sowohl Seiten- und Widget-Klassen als auch deren Instanzen als React-Komponenten repräsentiert. Die Beispiele in dieser Anleitung machen von ES6 und JSX Gebrauch, jedoch funktionieren die hier beschriebenen APIs auch mit ES5 und ohne JSX.

Widget-Komponenten können analog zu Seitenkomponenten definiert werden:

So wie Obj die Basisklasse aller Seitenklassen ist, ist Widget die Basisklasse aller Widget-Klassen. Scrivito.provideComponent wird auch zur Definition einer Widget-Komponente verwendet, die wie hier Instanzen einer HeadlineWidget-Klasse rendert:

Wenn Sie mit Hilfe von Reacts Komponenten-API mit Zuständen und Ereignissen arbeiten möchten, übergeben Sie Scrivito.provideComponent eine React.Component anstelle einer funktionalen Komponente. In diesem Fall wird das darzustellende Widget der Komponente mittels props.widget übergeben (siehe auch Seiteninhalte mit React-Komponenten anzeigen).

Eines fehlt bei den obigen Beispielen für Komponenten noch: CMS-Inhalte werden zwar dargestellt, sie können jedoch nicht bearbeitet werden. Um dies direkt auf den Seiten zu ermöglichen, steht die Helper-Komponente Scrivito.ContentTag zur Verfügung. Setzen wir sie also in der obigen Widget-Komponente ein, um deren Instanzen bearbeitbar zu machen:

Die Komponente Scrivito.ContentTag erwartet in content entweder eine Widget- oder eine Obj-Instanz sowie in attribute den Namen des Attributs, dessen Wert gerendert werden soll.

Voreingestellt rendert sie ein <div>-Tag mit der DOM-Repräsentation des Inhalts des angegebenen Attributs. Im obigen Beispiel wird ihr ein string-Attribut übergeben, wodurch die entsprechende Zeichenkette (in HTML-Darstellung) in den DOM aufgenommen wird.

Das auszugebende Tag kann mit Hilfe der Eigenschaft tag frei gewählt werden. Ferner kann auch die DOM-Repräsentation des Attributwerts beeinflusst werden, indem <Scrivito.ContentTag> mit Unterelementen versehen wird, etwa folgendermaßen:

Als Ergebnis würde ungefähr Folgendes gerendert werden:

Ein weiterer wichtiger Anwendungsfall für Scrivito.ContentTag ist es, Attribute vom Typ widgetlist zu rendern:

In diesem Fall rendert Scrivito einfach alle Widgets in dem widgetlist-Attribut mit Hilfe der Komponenten, die für sie jeweils mit provideComponent registriert wurden.

Um Bilder leicht rendern zu können, stellt Scrivito die Komponente Scrivito.ImageTag zur Verfügung:

Im Wesentlichen generiert diese Komponente das folgende Markup, das Sie natürlich auch selber eingeben könnten:

Im Gegensatz zum manuell angegebenen <img>-Tag macht die ImageTag-Komponente Bilder jedoch bearbeitbar, optimiert den Ladevorgang und skaliert die Bilder dynamisch 🇺🇸, damit sie schneller ausgeliefert werden können.

Über die optionale Eigenschaft attribute kann man auch den Namen eines Attributs vom Typ reference übergeben. Typischerweise werden Attribute dieses Typs in Image-Widgets verwendet, um auf das zu verwendende Bild zu verweisen. Ein einfaches Image-Widget könnte man so implementieren: