作者:
    Creation:2025-02-07Last update:2025-06-29

    嵌套 / 子内容引用

    嵌套如何工作

    在 Intlayer 中，嵌套是通过 nest 函数实现的，它允许您引用和重用来自另一个字典的内容。与其重复内容，不如通过其键指向现有的内容模块。

    设置嵌套

    要在你的 Intlayer 项目中设置嵌套，你首先定义你希望重用的基础内容。然后，在一个单独的内容模块中，你使用 nest 函数来导入该内容。

    基础字典

    下面是一个基础字典的示例，用于嵌套在另一个字典中：

    firstDictionary.content.ts
    import { type Dictionary } from "intlayer";

const firstDictionary = {
  key: "key_of_my_first_dictionary",
  content: {
    content: "content",
    subContent: {
      contentNumber: 0,
      contentString: "string",
    },
  },
} satisfies Dictionary;

export default firstDictionary;

    使用 Nest 进行引用

    现在，创建另一个内容模块，使用 nest 函数来引用上述内容。您可以引用整个内容或特定的嵌套值：

    secondDictionary.content.ts
    import { nest, type Dictionary } from "intlayer";

const myNestingContent = {
  key: "key_of_my_second_dictionary",
  content: {
    // 引用整个字典：
    fullNestedContent: nest("key_of_my_first_dictionary"),
    // 引用特定的嵌套值：
    partialNestedContent: nest(
      "key_of_my_first_dictionary",
      "subContent.contentNumber"
    ),
  },
} satisfies Dictionary;

export default myNestingContent;

    作为第二个参数，您可以指定该内容中嵌套值的路径。如果未提供路径，则返回引用字典的全部内容。

    设置嵌套

    To use nested content in a React component, leverage the useIntlayer hook from the react-intlayer package. This hook retrieves the correct content based on the specified key. Here's an example of how to use it:

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

const NestComponent: FC = () => {
const { fullNestedContent, partialNestedContent } = useIntlayer(
  "key_of_my_second_dictionary"
);

return (
  <div>
    <p>Full Nested Content: {JSON.stringify(fullNestedContent)}</p>
    <p>Partial Nested Value: {partialNestedContent}</p>
  </div>
);
};

export default NestComponent;

    其他资源

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

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

    文件
    Markdown