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>
  );
};

useI18n

版本历史

React 集成：useDictionary 钩子文档

React 中的示例用法

服务器集成

React 集成：`useDictionary` 钩子文档