插入 | Intlayer

此页面的内容已使用 AI 翻译。

插入如何工作

在 Intlayer 中，通过 insertion 函数实现插入内容，该函数识别字符串中的占位符字段（例如 {{name}} 或 {{age}}），这些占位符可以在运行时动态替换。这种方法允许您创建灵活的、类似模板的字符串，其中内容的特定部分由应用程序传递的数据决定。

当与 React Intlayer 或 Next Intlayer 集成时，您只需提供包含每个占位符值的数据对象，Intlayer 将自动渲染内容并替换占位符。

设置插入内容

要在 Intlayer 项目中设置插入内容，请创建一个包含插入定义的内容模块。以下是各种格式的示例。

**/*.content.ts

import { insert, type Dictionary } from "intlayer";const myInsertionContent = {  key: "my_key",  content: {    myInsertion: insert("你好，我的名字是 {{name}}，我今年 {{age}} 岁！"),  },} satisfies Dictionary;export default myInsertionContent;

在 React Intlayer 中使用插入内容

要在 React 组件中使用插入内容，请从 react-intlayer 包中导入并使用 useIntlayer 钩子。此钩子检索指定键的内容，并允许您传入一个对象，将内容中的每个占位符映射到您希望显示的值。

**/*.tsx

import type { FC } from "react";import { useIntlayer } from "react-intlayer";const InsertionComponent: FC = () => {  const { myInsertion } = useIntlayer("my_key");  return (    <div>      <p>        {          /* 输出: "你好，我的名字是 John，我今年 30 岁！" */          myInsertion({ name: "John", age: "30" })        }      </p>      <p>        {          /* 您可以使用不同的值重复使用相同的插入 */          myInsertion({ name: "Alice", age: "25" })        }      </p>    </div>  );};export default InsertionComponent;

其他资源

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

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

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

文档的 GitHub 链接

条件文件