嵌套 / 子内容引用
如何实现嵌套
在 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;作为参数的第二部分，您可以指定该内容中一个嵌套值的路径。如果未提供路径，则返回引用字典的整个内容。
在 React Intlayer 中使用嵌套
在 React 组件中使用嵌套内容时，可以利用 react-intlayer 包中的 useIntlayer hook。此 hook 根据指定的键检索正确的内容。以下是一个使用它的示例：
**/*.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> 完整嵌套内容: {JSON.stringify(fullNestedContent)} {/* 输出: {"content": "content", "subContent": {"contentNumber": 0, "contentString": "string"}} */} </p> <p> 部分嵌套值: {partialNestedContent} {/* 输出: 0 */} </p> </div> );};export default NestComponent;其他资源
有关配置和使用的更多详细信息，请参考以下资源：
这些资源提供了在不同环境和各种框架中设置和使用 Intlayer 的更多见解。
如果您有改善此文档的想法，请随时通过在GitHub上提交拉取请求来贡献。
文档的 GitHub 链接