Функция Извлечения

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

Предупреждение: извлечение функции в настоящее время недоступно в JSON-декларации контента и файлах удаленной декларации контента.

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

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

import type { Dictionary } from "intlayer";const functionContent = {  key: "function_content",  content: {    text: () => "Это контент, отображаемый функцией",  },} 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 и вызвать его с ID контента для получения контента. Вот пример:

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;