Pobieranie funkcji

Intlayer pozwala na deklarowanie funkcji zawartości w Twoich modułach zawartości, które mogą być zarówno synchroniczne, jak i asynchroniczne. Podczas budowania aplikacji Intlayer wykonuje te funkcje, aby uzyskać wynik funkcji. Wartość zwracana musi być obiektem JSON lub prostą wartością, taką jak string lub liczba.

Uwaga: pobieranie funkcji jest obecnie niedostępne w deklaracjach zawartości JSON oraz w plikach zdalnych deklaracji zawartości.

Deklaracje funkcji

Oto przykład prostej synchronicznej funkcji pobierającej zawartość:

import type { Dictionary } from "intlayer";const functionContent = {  key: "function_content",  content: {    text: () => "To jest zawartość renderowana przez funkcję",  },} satisfies Dictionary;export default functionContent;

W tym przykładzie klucz text zawiera funkcję, która zwraca łańcuch znaków. Ta zawartość może być renderowana w Twoich komponentach React za pomocą pakietów interpretera Intlayer, takich jak react-intlayer.

Asynchroniczne pobieranie funkcji

Oprócz funkcji synchronicznych, Intlayer obsługuje funkcje asynchroniczne, co pozwala na pobieranie danych z zewnętrznych źródeł lub symulowanie pobierania danych za pomocą danych testowych (mock).

Poniżej znajduje się przykład funkcji asynchronicznej, która symuluje pobieranie z serwera:

import { setTimeout } from "node:timers/promises";import type { Dictionary } from "intlayer";const fakeFetch = async (): Promise<string> => {  // Poczekaj 200ms, aby zasymulować pobieranie z serwera  return await setTimeout(200).then(    () => "To jest zawartość pobrana z serwera"  );};const asyncFunctionContent = {  key: "async_function",  content: { text: fakeFetch },} satisfies Dictionary;export default asyncFunctionContent;

W tym przypadku funkcja fakeFetch naśladuje opóźnienie, aby zasymulować czas odpowiedzi serwera. Intlayer wykonuje funkcję asynchroniczną i używa wyniku jako zawartości dla klucza text.

Używanie zawartości opartej na funkcjach w komponentach React

Aby użyć zawartości opartej na funkcjach w komponencie React, musisz zaimportować useIntlayer z react-intlayer i wywołać ją z identyfikatorem zawartości, aby pobrać zawartość. Oto przykład:

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>      {/* Wyjście: To jest zawartość renderowana przez funkcję */}      <p>{asyncFunctionContent.text}</p>      {/* Wyjście: To jest zawartość pobrana z serwera */}    </div>  );};export default MyComponent;