作者:
    Aymeric PINEAU
    Creation:2025-02-07Last update:2025-06-29

    React 集成：useDictionary 钩子文档

    本节提供了在 React 应用中使用 useDictionary 钩子的详细指导，使得无需视觉编辑器即可高效处理本地化内容。

    React 中的示例用法

    ./ComponentExample.tsx
    import type { FC } from "react";
import { useDictionary } from "react-intlayer";
import componentContent from "./component.content";

const ComponentExample: FC = () => {
  const { title, content } = useDictionary(componentContent);

  return (
    <div>
      <h1>{title}</h1>
      <p>{content}</p>
    </div>
  );
};

    服务器集成

    如果您在 IntlayerProvider 之外使用 useDictionary 钩子，则在渲染组件时必须显式提供 locale 作为参数：

    ./ServerComponentExample.tsx
    import type { FC } from "react";
import { useDictionary } from "react-intlayer/server";
import clientComponentExampleContent from "./component.content";

const ServerComponentExample: FC<{ locale: string }> = ({ locale }) => {
  const { content } = useDictionary(clientComponentExampleContent, locale);

  return (
    <div>
      <h1>{content.title}</h1>
      <p>{content.content}</p>
    </div>
  );
};
    tuseI18n