作者:
    Creation:2025-03-13Last update:2025-06-29

    插入内容 / 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 的更多见解。

    性别
    文件