条件内容 / 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: "当条件为 true 时的内容",      false: "当条件为 false 时的内容",      fallback: "当条件未通过验证时的内容", // 可选    }),  },} satisfies Dictionary;export default myConditionalContent;

    如果未声明 fallback,如果条件不满足,则最后声明的键将用作 fallback。

    在 React Intlayer 中使用条件内容

    要在 React 组件中使用条件内容,请从 react-intlayer 包中导入并使用 useIntlayer 钩子。此钩子会获取指定键的内容,并允许您传入条件以选择适当的输出。

    **/*.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>        {          /* 输出: 当条件未通过验证时的内容 */          myCondition("")        }      </p>      <p>        {          /* 输出: 当条件未通过验证时的内容 */          myCondition(undefined)        }      </p>    </div>  );};export default ConditionalComponent;

    额外资源

    有关配置和使用的详细信息,请参阅以下资源:

    这些资源提供了有关在各种环境和框架中设置和使用 Intlayer 的更多见解。

    如果您有改善此文档的想法,请随时通过在GitHub上提交拉取请求来贡献。

    文档的 GitHub 链接