Funktionsabruf

Intlayer ermöglicht es Ihnen, Inhaltsfunktionen in Ihren Inhaltsmodulen zu deklarieren, die entweder synchron oder asynchron sein können. Wenn die Anwendung erstellt 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: Der Funktionsabruf ist derzeit nicht in der JSON-Inhaltsdeklaration und in Dateien mit entfernten Inhaltsdeklarationen 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 text-Schlüssel 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.

Asynchroner Funktionsabruf

Zusätzlich zu synchronen Funktionen unterstützt Intlayer auch asynchrone Funktionen, mit denen Sie Daten aus externen Quellen abrufen oder die Datenabfrage mit Mock-Daten simulieren können.

Unten ist 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> => {  // Warten Sie 200 ms, um einen Abruf vom Server zu simulieren  return await setTimeout(200).then(    () => "Dies ist der Inhalt, der vom Server abgerufen wurde"  );};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 text-Schlüssel.

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 es 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;