Funktionsabruf

Intlayer ermöglicht es Ihnen, Inhaltsfunktionen in Ihren Inhaltsmodulen zu deklarieren, die entweder synchron oder asynchron sein können. Wenn die Anwendung gebaut wird, führt Intlayer diese Funktionen aus, um das Ergebnis der Funktion zu erhalten. Der Rückgabewert muss ein JSON-Objekt oder ein einfacher Wert wie ein String oder eine Zahl sein.

Warnung: Funktionsabruf ist derzeit in JSON-Inhaltsdeklarationen und entfernten Inhaltsdeklarationsdateien nicht verfügbar.

Funktionsdeklarationen

Hier ist ein Beispiel für eine einfache synchrone Funktion, die Inhalte abruft:

import type { Dictionary } from "intlayer";

const functionContent = {
  key: "function_content",
  content: {
    text: () => "Dies ist der Inhalt, der von einer Funktion gerendert wird",
  },
} satisfies Dictionary;

export default functionContent;

In diesem Beispiel enthält der Schlüssel text eine Funktion, die einen String zurückgibt. Dieser Inhalt kann in Ihren React-Komponenten mit den Interpreter-Paketen von Intlayer wie react-intlayer gerendert werden.

Asynchrone Funktionsabfrage

Neben synchronen Funktionen unterstützt Intlayer auch asynchrone Funktionen, die es ermöglichen, Daten aus externen Quellen abzurufen oder die Datenabfrage mit Mock-Daten zu simulieren.

Nachfolgend ein Beispiel für eine asynchrone Funktion, die einen Serverabruf simuliert:

import { setTimeout } from "node:timers/promises";
import type { Dictionary } from "intlayer";

const fakeFetch = async (): Promise<string> => {
  // Warte 200ms, um einen Abruf vom Server zu simulieren
  return await setTimeout(200).then(
    () => "Dies ist der vom Server abgerufene Inhalt"
  );
};

const asyncFunctionContent = {
  key: "async_function",
  content: { text: fakeFetch },
} satisfies Dictionary;

export default asyncFunctionContent;

In diesem Fall simuliert die Funktion fakeFetch eine Verzögerung, um die Serverantwortzeit nachzuahmen. Intlayer führt die asynchrone Funktion aus und verwendet das Ergebnis als Inhalt für den Schlüssel text.

Verwendung von funktionsbasierten Inhalten in React-Komponenten

Um funktionsbasierte Inhalte in einer React-Komponente zu verwenden, müssen Sie useIntlayer aus react-intlayer importieren und mit der Inhalts-ID aufrufen, um den Inhalt abzurufen. Hier ist ein Beispiel:

import type { FC } from "react";
import { useIntlayer } from "react-intlayer";

const MyComponent: FC = () => {
  const functionContent = useIntlayer("function_content");
  const asyncFunctionContent = useIntlayer("async_function_content");

  return (
    <div>
      <p>{functionContent.text}</p>
      {/* Ausgabe: Dies ist der Inhalt, der von einer Funktion gerendert wird */}
      <p>{asyncFunctionContent.text}</p>
      {/* Ausgabe: Dies ist der Inhalt, der vom Server abgerufen wurde */}
    </div>
  );
};

export default MyComponent;