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;

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

在 React Intlayer 中使用嵌套

要在 React 组件中使用嵌套内容，可以利用 react-intlayer 包中的 useIntlayer 钩子。此钩子根据指定的键检索正确的内容。以下是如何使用它的示例：

**/*.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)}
        {/* 输出: {"content": "content", "subContent": {"contentNumber": 0, "contentString": "string"}} */}
      </p>
      <p>
        Partial Nested Value: {partialNestedContent}
        {/* 输出: 0 */}
      </p>
    </div>
  );
};

export default NestComponent;

其他资源

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

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

文件

Markdown