Testen Sie Scrivito 30 Tage lang kostenlos
Testen Sie Scrivito 30 Tage lang kostenlos

Seiteninhalte mit React-Komponenten anzeigen

Seiteninhalte mit React-Komponenten anzeigen

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.

Eine Komponente einer Objekt- oder Widget-Klasse zuweisen

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 Widgetklasse 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:

Scrivito.provideComponent('HeadlineWidget', widget =>   
  <Scrivito.ContentTag tag="h1" content={ widget } attribute="title" />
);

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:

class Headline extends React.Component {
  constructor(props) {
    super(props);
    this.state = { cssClass: 'bg-warning' };
  }

  handleEvent() {
    // Handle event that changes state
  }

  render() {
    return (
      <div className={ this.state.cssClass } onClick={ () => this.handleEvent() }>
        <Scrivito.ContentTag 
          tag="h1"
          content={ this.props.widget }
          attribute="title"
        />
      </div>
    );
  }
}

Scrivito.provideComponent('HeadlineWidget', Headline);

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.

Eigenständige Komponenten mit Scrivito verbinden

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:

// 3rd-party library for formatting file size
import filesize from 'filesize';

function FileSizeBox(obj) {
  return (
    <div className="noticeBox fileSize">     
      { filesize(obj.contentLength()) }
    </div> 
  );
}

// Connect the component to Scrivito
export default Scrivito.connect(FileSizeBox);

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.

Zusammengefasst …

… 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 (wie beispielsweise die GoogleAnalytics-Komponente 🇺🇸) sollte stets als eine React.Component-Klasse angelegt und mittels Scrivito.connect mit Scrivito verbunden werden.