Вложенность / Ссылки на Подконтент

Как работает вложенность

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

Настройка вложенности

Чтобы настроить вложенность в вашем проекте Intlayer, сначала определите базовый контент, который вы хотите повторно использовать. Затем в отдельном модуле контента используйте функцию nest для импорта этого контента.

Базовый словарь

Ниже приведен пример базового словаря для вложения в другой словарь:

import { type Dictionary } from "intlayer";const firstDictionary = {  key: "key_of_my_first_dictionary",  content: {    content: "content",    subContent: {      contentNumber: 0,      contentString: "string",    },  },} satisfies Dictionary;export default firstDictionary;

Ссылка с помощью Nest

Теперь создайте другой модуль контента, который использует функцию nest для ссылки на вышеуказанный контент. Вы можете ссылаться на весь контент или на определенное вложенное значение:

import { nest, type Dictionary } from "intlayer";const myNestingContent = {  key: "key_of_my_second_dictionary",  content: {    // Ссылка на весь словарь:    fullNestedContent: nest("key_of_my_first_dictionary"),    // Ссылка на определенное вложенное значение:    partialNestedContent: nest(      "key_of_my_first_dictionary",      "subContent.contentNumber"    ),  },} satisfies Dictionary;export default myNestingContent;

В качестве второго параметра вы можете указать путь к вложенному значению внутри этого контента. Если путь не указан, возвращается весь контент ссылочного словаря.

Использование вложенности с React Intlayer

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

import type { FC } from "react";import { useIntlayer } from "react-intlayer";const NestComponent: FC = () => {  const { fullNestedContent, partialNestedContent } = useIntlayer(    "key_of_my_second_dictionary"  );  return (    <div>      <p>        Полный вложенный контент: {JSON.stringify(fullNestedContent)}        {/* Вывод: {"content": "content", "subContent": {"contentNumber": 0, "contentString": "string"}} */}      </p>      <p>        Частичное вложенное значение: {partialNestedContent}        {/* Вывод: 0 */}      </p>    </div>  );};export default NestComponent;

Дополнительные ресурсы

Для получения более подробной информации о настройке и использовании обратитесь к следующим ресурсам:

• Документация Intlayer CLI
• Документация React Intlayer
• Документация Next Intlayer

Эти ресурсы предоставляют дополнительные сведения о настройке и использовании Intlayer в различных средах и с различными фреймворками.