Автор:

Ссылайтесь на этот документ на ваш любимый ассистент AIChatGPT Claude DeepSeek Google AI mode Gemini Perplexity Mistral Grok

Спросите свой вопрос и получите сводку документа, используя эту страницу и выбранного вами поставщика AI

Содержимое этой страницы было переведено с помощью ИИ.

Смотреть последнюю версию оригинального контента на английском

Изменить эту документацию

Если у вас есть идея по улучшению этой документации, не стесняйтесь внести свой вклад, подав запрос на вытягивание на GitHub.

Ссылка на документацию GitHub

Создание:2025-02-07Последнее обновление:2026-10-08

Копировать

Копировать Markdown документа в буфер обмена

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

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

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

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

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

**/*.tsx

Копировать код

Копировать код в буфер обмена

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

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

  return (
    <div>
      <p>{myCondition(true)}</p>
      <p>{myCondition(false)}</p>
    </div>
  );
};

export default ConditionalComponent;

**/*.tsx

Копировать код

Копировать код в буфер обмена

import type { Component } from "solid-js";
import { useIntlayer } from "solid-intlayer";

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

  return (
    <div>
      <p>{myCondition(true)}</p>
      <p>{myCondition(false)}</p>
    </div>
  );
};

export default ConditionalComponent;

Чтобы использовать условный контент с vanilla-intlayer, извлеките его через useIntlayer. Вот пример:

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

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

**/*.tsx

Копировать код

Копировать код в буфер обмена

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

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

  return (
    <div>
      <p>
        {
          /* Output: my content when it's true */
          myCondition(true)
        }
      </p>
      <p>
        {
          /* Output: my content when it's false */
          myCondition(false)
        }
      </p>
      <p>
        {
          /* Output: my content when the condition fails */
          myCondition("")
        }
      </p>
      <p>
        {
          /* Output: my content when the condition fails */
          myCondition(undefined)
        }
      </p>
    </div>
  );
};

export default ConditionalComponent;

Чтобы использовать условный контент в клиентских компонентах Next.js, извлеките его через хук useIntlayer. Вот пример:

**/*.tsx

Копировать код

Копировать код в буфер обмена

"use client";

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

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

  return (
    <div>
      <p>{myCondition(true)}</p>
      <p>{myCondition(false)}</p>
    </div>
  );
};

export default ConditionalComponent;

Чтобы использовать условный контент в компонентах Vue, извлеките его через useIntlayer. Вот пример:

**/*.vue

Копировать код

Копировать код в буфер обмена

<script setup lang="ts">
import { useIntlayer } from "vue-intlayer";

const { myCondition } = useIntlayer("my_key");
</script>

<template>
  <div>
    <p>{{ myCondition(true) }}</p>
    <p>{{ myCondition(false) }}</p>
  </div>
</template>

Чтобы использовать условный контент в компонентах Svelte, извлеките его через хранилище useIntlayer. Доступ к хранилищу осуществляется через $. Вот пример:

**/*.svelte

Копировать код

Копировать код в буфер обмена

<script lang="ts">
import { useIntlayer } from "svelte-intlayer";

const content = useIntlayer("my_key");
</script>

<div>
  <p>{$content.myCondition(true)}</p>
  <p>{$content.myCondition(false)}</p>
</div>

Чтобы использовать условный контент в компонентах Preact, извлеките его через хук useIntlayer. Вот пример:

**/*.tsx

Копировать код

Копировать код в буфер обмена

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

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

  return (
    <div>
      <p>{myCondition(true)}</p>
      <p>{myCondition(false)}</p>
    </div>
  );
};

export default ConditionalComponent;

Чтобы использовать условный контент в компонентах SolidJS, извлеките его через хук useIntlayer. Вот пример:

**/*.tsx

Копировать код

Копировать код в буфер обмена

import type { Component } from "solid-js";
import { useIntlayer } from "solid-intlayer";

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

  return (
    <div>
      <p>{myCondition(true)}</p>
      <p>{myCondition(false)}</p>
    </div>
  );
};

export default ConditionalComponent;

Чтобы использовать условный контент в компонентах Angular, извлеките его через useIntlayer. Вот пример:

app.component.ts

Копировать код

Копировать код в буфер обмена

import { Component } from "@angular/core";
import { useIntlayer } from "angular-intlayer";

@Component({
  selector: "app-conditional",
  template: `
    <div>
      <p>{{ content().myCondition(true) }}</p>
      <p>{{ content().myCondition(false) }}</p>
    </div>
  `,
})
export class ConditionalComponent {
  content = useIntlayer("my_key");
}

To utilize conditional content with vanilla-intlayer, retrieve it via the useIntlayer hook. Here's an example:

**/*.ts

Копировать код

Копировать код в буфер обмена

import { installIntlayer, useIntlayer } from "vanilla-intlayer";

installIntlayer();

const content = useIntlayer("my_key").onChange((newContent) => {
  document.getElementById("true-content")!.textContent =
    newContent.myCondition(true);
  document.getElementById("false-content")!.textContent =
    newContent.myCondition(false);
});

// Initial render
document.getElementById("true-content")!.textContent =
  content.myCondition(true);
document.getElementById("false-content")!.textContent =
  content.myCondition(false);

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

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

Документация Intlayer CLIУзнайте, как использовать Intlayer CLI для управления вашим многоязычным сайтом. Следуйте шагам в этой онлайн-документации, чтобы настроить свой проект за считанные минуты.

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

Документация React IntlayerНастройка Intlayer в проекте Create React App: типизированный контент рядом с компонентами, переключатель языка и переводы, загружаемые по локали.

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

Документация Next IntlayerНастройка Intlayer в Next.js 15 App Router: middleware маршрутизации, асинхронные params, Server и Client Components, локализованные метаданные и sitemap.

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

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

Перечисление Пол