React 集成：useIntlayer Hook 文档

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

    在 React 中导入 useIntlayer

    可以通过根据上下文导入 useIntlayer hook 将其集成到 React 应用程序中：

    • 客户端组件：

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

    • 服务器组件：

    参数

    该 hook 接受两个参数：

    1. key：用于检索本地化内容的字典键。
    2. 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 可视化编辑器：有关更直观的内容管理体验，请参阅可视化编辑器文档 这里。

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

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

    文档的 GitHub 链接
    tuseIntlayerAsync