条件内容 / 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 链接