Функция извлечения
Объявления функций
Intlayer позволяет вам объявлять функции контента в ваших модулях контента, которые могут быть как синхронными, так и асинхронными. Когда приложение строится, Intlayer выполняет эти функции, чтобы получить результат функции. Возвращаемое значение должно быть объектом JSON или простым значением, таким как строка или число.
Вот пример простой синхронной функции извлечения контента:
1import type { DeclarationContent } from "intlayer";
2
3const functionContent = {
4 key: "function_content",
5 content: {
6 text: () => "Это контент, отрендеренный функцией",
7 },
8} satisfies DeclarationContent;
9
10export default functionContent;В этом примере ключ text содержит функцию, которая возвращает строку. Этот контент может быть отрендерен в ваших компонентах React с использованием пакетов интерпретатора Intlayer, таких как react-intlayer.
Асинхронное извлечение функций
В дополнение к синхронным функциям, Intlayer поддерживает асинхронные функции, позволяя вам извлекать данные из внешних источников или имитировать извлечение данных с помощью мок-данных.
Ниже приведен пример асинхронной функции, которая имитирует извлечение с сервера:
1import { setTimeout } from "node:timers/promises";
2import type { DeclarationContent } from "intlayer";
3
4const fakeFetch = async (): Promise<string> => {
5 // Ждать 200 мс, чтобы симулировать извлечение с сервера
6 return await setTimeout(200).then(() => "Это контент, извлеченный с сервера");
7};
8
9const asyncFunctionContent = {
10 key: "async_function",
11 content: { text: fakeFetch },
12} satisfies DeclarationContent;
13
14export default asyncFunctionContent;В этом случае функция fakeFetch имитирует задержку, чтобы смоделировать время ответа сервера. Intlayer выполняет асинхронную функцию и использует результат в качестве контента для ключа text.
Использование контента на основе функций в компонентах React
Чтобы использовать контент на основе функций в компоненте React, вам необходимо импортировать useIntlayer из react-intlayer и вызвать его с идентификатором контента для получения контента. Вот пример:
1import { useIntlayer } from "react-intlayer";
2
3const MyComponent = () => {
4 const functionContent = useIntlayer("function_content");
5 const asyncFunctionContent = useIntlayer("async_function_content");
6
7 return (
8 <div>
9 <p>{functionContent.text}</p>
10 {/* Вывод: Это контент, отрендеренный функцией */}
11 <p>{asyncFunctionContent.text}</p>
12 {/* Вывод: Это контент, извлеченный с сервера */}
13 </div>
14 );
15};
16
17export default MyComponent;Если у вас есть идея по улучшению этой документации, не стесняйтесь внести свой вклад, подав запрос на вытягивание на GitHub.
Ссылка на документацию GitHub