Получение данных через функции

Intlayer позволяет объявлять функции контента в ваших модулях контента, которые могут быть как синхронными, так и асинхронными. При сборке приложения Intlayer выполняет эти функции, чтобы получить результат функции. Возвращаемое значение должно быть объектом JSON или простым значением, таким как строка или число.

Внимание: получение данных через функции в настоящее время недоступно в объявлениях контента в формате JSON и в файлах удалённых объявлений контента.

Объявления функций

Вот пример простой синхронной функции, получающей контент:

import type { Dictionary } from "intlayer";

const functionContent = {
  key: "function_content",
  content: {
    text: () => "This is the content rendered by a function",
  },
} satisfies Dictionary;

export default functionContent;

В этом примере ключ text содержит функцию, которая возвращает строку. Этот контент может быть отображён в ваших React-компонентах с использованием пакетов интерпретатора Intlayer, таких как react-intlayer.

Асинхронное получение данных функцией

Помимо синхронных функций, Intlayer поддерживает асинхронные функции, что позволяет получать данные из внешних источников или имитировать получение данных с помощью мок-данных.

Ниже приведён пример асинхронной функции, которая имитирует запрос к серверу:

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

const fakeFetch = async (): Promise<string> => {
  // Ждём 200 мс, чтобы имитировать запрос к серверу
  return await setTimeout(200).then(() => "Это контент, полученный с сервера");
};

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

export default asyncFunctionContent;

В этом случае функция fakeFetch имитирует задержку, чтобы смоделировать время отклика сервера. Intlayer выполняет асинхронную функцию и использует результат в качестве содержимого для ключа text.

Использование контента на основе функций в React-компонентах

Чтобы использовать контент на основе функций в React-компоненте, необходимо импортировать useIntlayer из react-intlayer и вызвать его с идентификатором контента для получения содержимого. Вот пример:

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>
      {/* Вывод: Это содержимое, сгенерированное функцией */}
      <p>{asyncFunctionContent.text}</p>
      {/* Вывод: Это содержимое, полученное с сервера */}
    </div>
  );
};

export default MyComponent;