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

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;

История документации

• 5.5.10 - 2025-06-29: Инициализация истории