Функция выборки

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

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

Декларации функций

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

import type { DeclarationContent } from "intlayer";const functionContent = {  key: "function_content",  content: {    text: () => "Это содержимое, обработанное функцией",  },} satisfies DeclarationContent;export default functionContent;

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

Асинхронная выборка функции

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

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

import { setTimeout } from "node:timers/promises";import type { DeclarationContent } from "intlayer";const fakeFetch = async (): Promise<string> => {  // Ждем 200мс, чтобы имитировать получение данных с сервера  return await setTimeout(200).then(    () => "Это содержимое, полученное с сервера"  );};const asyncFunctionContent = {  key: "async_function",  content: { text: fakeFetch },} satisfies DeclarationContent;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;