作者:
    Aymeric PINEAU
    Creation:2025-02-07Last update:2026-10-08

    条件内容 / Intlayer 中的条件

    条件如何工作

    在 Intlayer 中，通过 cond 函数实现条件内容，该函数将特定条件（通常是布尔值）映射到其对应的内容。这种方法使您能够根据给定条件动态选择内容。当与 React Intlayer 或 Next Intlayer 集成时，会根据运行时提供的条件自动选择适当的内容。

    设置条件内容

    要在您的 Intlayer 项目中设置条件内容，请创建一个包含条件定义的内容模块。以下是各种格式的示例。

    **/*.content.ts
    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 组件中使用条件内容，请从 react-intlayer 包中导入并使用 useIntlayer Hook。该 Hook 会获取指定键的内容，并允许您传入条件以选择对应的输出：

    **/*.tsx
    import type { FC } from "react";
import { useIntlayer } from "react-intlayer";

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

  return (
    <div>
      <p>
        {
          /* 输出：条件为 true 时的内容 */
          myCondition(true)
        }
      </p>
      <p>
        {
          /* 输出：条件为 false 时的内容 */
          myCondition(false)
        }
      </p>
      <p>
        {
          /* 输出：条件不满足时的 fallback 内容 */
          myCondition("")
        }
      </p>
      <p>
        {
          /* 输出：条件不满足时的 fallback 内容 */
          myCondition(undefined)
        }
      </p>
    </div>
  );
};

export default ConditionalComponent;

    要在 Next.js 客户端组件中使用条件内容，可通过 useIntlayer Hook 获取。示例如下：

    **/*.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 Hook 获取。示例如下：

    **/*.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 Hook 获取。使用 $ 访问 store。示例如下：

    **/*.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 Hook 获取。示例如下：

    **/*.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 Hook 获取。示例如下：

    **/*.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 Hook 获取。示例如下：

    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");
}

    要在 Vanilla JS 中使用条件内容，可通过 vanilla-intlayer 的 useIntlayer 获取。示例如下：

    **/*.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);
});

// 初始渲染
document.getElementById("true-content")!.textContent =
  content.myCondition(true);
document.getElementById("false-content")!.textContent =
  content.myCondition(false);

    其他资源

    有关配置和使用的更多详细信息，请参考以下资源：

    Intlayer CLI 文档
    React Intlayer 文档
    Next Intlayer 文档

    这些资源提供了在各种环境和框架中设置和使用 Intlayer 的进一步见解。

    枚举性别