Условный Контент / Условие в Intlayer

Как Работает Условие

В Intlayer условный контент достигается с помощью функции cond, которая сопоставляет определенные условия (обычно булевы значения) с соответствующим контентом. Этот подход позволяет динамически выбирать контент на основе заданного условия. При интеграции с React Intlayer или Next Intlayer соответствующий контент автоматически выбирается в зависимости от условия, предоставленного во время выполнения.

Настройка Условного Контента

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

import { cond, type Dictionary } from "intlayer";

const myConditionalContent = {
  key: "my_key",
  content: {
    myCondition: cond({
      true: "мой контент, когда условие истинно",
      false: "мой контент, когда условие ложно",
      fallback: "мой контент, когда условие не выполнено", // Необязательно
    }),
  },
} satisfies Dictionary;

export default myConditionalContent;

Если fallback не указан, последняя объявленная ключевая запись будет использоваться в качестве fallback, если условие не выполнено.

Использование Условного Контента с React Intlayer

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

import type { FC } from "react";
import { useIntlayer } from "react-intlayer";

const ConditionalComponent: FC = () => {
  const { myCondition } = useIntlayer("my_key");

  return (
    <div>
      <p>
        {
          /* Вывод: мой контент, когда условие истинно */
          myCondition(true)
        }
      </p>
      <p>
        {
          /* Вывод: мой контент, когда условие ложно */
          myCondition(false)
        }
      </p>
      <p>
        {
          /* Вывод: мой контент, когда условие не выполнено */
          myCondition("")
        }
      </p>
      <p>
        {
          /* Вывод: мой контент, когда условие не выполнено */
          myCondition(undefined)
        }
      </p>
    </div>
  );
};

export default ConditionalComponent;

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

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

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

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