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

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

В 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 в различных средах и с различными фреймворками.