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

React 集成：useIntlayer Hook 文档

本节提供了在 React 应用程序中使用 useIntlayer hook 的详细指南，以实现高效的内容本地化。

在 React 中导入 useIntlayer

可以通过以下方式将 useIntlayer hook 集成到 React 应用程序中：

客户端组件：

typescript

import { useIntlayer } from "react-intlayer"; // 用于客户端的 React 组件

服务端组件：

参数

该 hook 接受两个参数：

key：用于检索本地化内容的字典键。
locale（可选）：所需的语言环境。如果未指定，则默认为上下文的语言环境。

字典

所有字典键必须在内容声明文件中声明，以增强类型安全性并避免错误。您可以在这里找到设置说明。

在 React 中的示例用法

在 React 组件中演示 useIntlayer hook 的使用：

src/app.tsx

import type { FC } from "react";import { ClientComponentExample, ServerComponentExample } from "@components";import { IntlayerProvider } from "react-intlayer";import { useIntlayer, IntlayerServerProvider } from "react-intlayer/server";import { Locales } from "intlayer";const App: FC<{ locale: Locales }> = ({ locale }) => {  const content = useIntlayer("homepage", locale);  return (    <>      <p>{content.introduction}</p>      <IntlayerProvider locale={locale}>        <ClientComponentExample />      </IntlayerProvider>      <IntlayerServerProvider locale={locale}>        <ServerComponentExample />      </IntlayerServerProvider>    </>  );};

src/components/ComponentExample.tsx

import type { FC } from "react";import { useIntlayer } from "react-intlayer";const ComponentExample: FC = () => {  const content = useIntlayer("component-example");  return (    <div>      <h1>{content.title}</h1>      <p>{content.description}</p>    </div>  );};

src/components/ServerComponentExample.tsx

import { useIntlayer } from "react-intlayer/server";const ServerComponentExample = () => {  const content = useIntlayer("server-component");  return (    <div>      <h1>{content.title}</h1>      <p>{content.description}</p>    </div>  );};

处理属性

在本地化属性时，适当地访问内容值：

jsx

<button title={content.buttonTitle.value}>{content.buttonText}</button>

其他资源

Intlayer 可视化编辑器：有关更直观的内容管理体验，请参考可视化编辑器文档这里。

本节专门针对在 React 应用程序中集成 useIntlayer hook，简化本地化过程并确保不同语言环境下的内容一致性。

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

文档的 GitHub 链接

t useIntlayerAsync