插入内容 / Intlayer 中的插入

Name: Intlayer
Author: Intlayer

插入的工作原理

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

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

设置插入内容

要在您的 Intlayer 项目中设置插入内容，请创建一个包含插入定义的内容模块。

使用 insert 函数显式声明插入内容。

在 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>
        {
          /* 输出: "Hello, my name is John and I am 30 years old!" */
          myInsertion({ name: "John", age: "30" })
        }
      </p>
      <p>
        {
          /* 您可以使用不同的值重复使用相同的插入内容 */
tsx fileName="**/*.tsx" codeFormat="typescript"
import type { FC } from "react";
import { useIntlayer } from "react-intlayer";

const InsertionComponent: FC = () => {
  const { myInsertion } = useIntlayer("my_key");

  return (
    <div>
      <p>
        {
          /* 输出: "Hello, my name is John and I am 30 years old!" */
          myInsertion({ name: "John", age: "30" })
        }
      </p>
      <p>
        {
          /* 你可以用不同的值重复使用相同的插入内容 */
          myInsertion({ name: "Alice", age: "25" })
        }
      </p>
    </div>
  );
};

export default InsertionComponent;

附加资源

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

Intlayer CLI 文档 const { useIntlayer } = require("react-intlayer");

const InsertionComponent = () => { const { myInsertion } = useIntlayer("my_key");

return (

{ / 输出: "Hello, my name is John and I am 30 years old!" / myInsertion({ name: "John", age: "30" }) }

{ / 你可以使用不同的值重复使用相同的插入 / myInsertion({ name: "Alice", age: "25" }) }

); };

module.exports = InsertionComponent;

plaintext

复制代码

复制代码到剪贴板

## 附加资源有关配置和使用的更详细信息，请参阅以下资源：- [Intlayer CLI 文档](/zh/doc/concept/cli)const { useIntlayer } = require("react-intlayer");const InsertionComponent = () => {  const { myInsertion } = useIntlayer("my_key");  return (    <div>      <p>        {          /* 输出: "Hello, my name is John and I am 30 years old!" */          myInsertion({ name: "John", age: "30" })        }      </p>      <p>        {          /* 你可以使用不同的值重复使用相同的插入 */          myInsertion({ name: "Alice", age: "25" })        }      </p>    </div>  );};module.exports = InsertionComponent;

## 附加资源有关配置和使用的更详细信息，请参阅以下资源：- [Intlayer CLI 文档](/zh/doc/concept/cli)const { useIntlayer } = require("react-intlayer");const InsertionComponent = () => {  const { myInsertion } = useIntlayer("my_key");  return (    <div>      <p>        {          /* 输出: "Hello, my name is John and I am 30 years old!" */          myInsertion({ name: "John", age: "30" })        }      </p>      <p>        {          /* 你可以使用不同的值重复使用相同的插入 */          myInsertion({ name: "Alice", age: "25" })        }      </p>    </div>  );};module.exports = InsertionComponent;

附加资源

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

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

性别

文件