React 快速入门

概述

本指南描述了如何将现有的 React 项目国际化。

我们将涵盖4个简单步骤：

安装所需的库

选择语言

添加 <T> 组件

添加您的环境变量

整个过程应该在5分钟内完成。

设置

1. 安装库

安装 gt-react 和 gtx-cli 库。

npm i gt-react
npm i gtx-cli --save-dev

2. 选择语言

<GTProvider> 用于配置 gt-react 的行为。它应该放置在应用程序中尽可能高的位置，理想情况下是在根部。

只需传递一个语言区域代码列表，即可将它们添加到您的应用程序中。

App.js

import { GTProvider } from "gt-react";
import MyApp from "./MyApp";
 
export default function App() {
  return (
    // 法语和中文支持 
    <GTProvider locales={['fr', 'zh']}> 
      <MyApp />
    </GTProvider> 
  );
}

有关 <GTProvider> 属性的完整列表和扩展文档，请参阅 API 参考。

3. 添加 `<T>` 组件

将任何嵌套的 JSX 内容包装在 <T> 组件中，使其可翻译。有关更多信息，请查看使用 <T> 组件的指南。

Example.js

import { T } from "gt-react";
 
export default function Example() {
  return (
    <T>
      <p>
        This gets translated.
      </p>
    </T>  
  );
}

使用 <Var> 组件来指定不应翻译的 JSX 内容。

Example.js

import { T, Var } from "gt-react";
 
export default function Example() {
  return (
    <T>
      <p>
        This gets translated. <Var>This does not.</Var>
      </p>
    </T>  
  );
}

提示： 为了节省时间，运行设置命令。这将扫描您的代码库中可翻译的 JSX 并为您插入 <T> 标签。

shell

npx gtx-cli setup

对于字符串，您可以使用 useGT() 进行翻译。有关更多信息，请查看此指南。

Example.js

import { useGT } from "gt-react";
 
export default function Example() {
  const t = useGT(); 
  return (
    <p>
      {t("This gets translated.")}
    </p>
  );
}

4. 添加您的环境变量

将您的 API 密钥和项目 ID 添加到您的环境变量中。

导航至控制面板。

在侧边栏中导航至开发者密钥页面。

点击创建开发 API 密钥然后复制 API 密钥和项目 ID 到剪贴板。

将项目 ID 和 API 密钥添加到您的环境变量中。根据您的 React 框架，环境变量可能略有不同。这些说明仅适用于开发环境。

VITE_GT_API_KEY="YOUR_GT_DEV_API_KEY"
VITE_GT_PROJECT_ID="YOUR_GT_PROJECT_ID"

保护您的 API 密钥！

React 环境变量通常在构建时被打包到您的应用程序中，并在客户端代码中公开可见。出于安全原因，您应该：

仅在本地开发期间使用开发 API 密钥
仅在部署时使用 CLI 工具的生产 API 密钥
在生产环境中切勿将任何 API 密钥作为环境变量包含进去

让我们试试看！

恭喜！🥳 您的应用现在已经支持多语言了！让我们看看它的实际效果。

以不同语言查看您的应用

将 <LocaleSelector> 组件添加到您的应用中。这将允许您为应用选择不同的语言。

提示： 您也可以在浏览器设置中更改您的语言。

在开发模式下启动您的React应用。

npm run dev

在您喜欢的浏览器中打开您的应用（通常在 http://localhost:3000）。

故障排除

部署到生产环境

请参考我们关于部署到生产环境的指南。

后续步骤

查看我们的 React API 参考，了解关于 <T> 组件和其他可用组件的详细信息。
使用 React 插件为您的应用创建一个已批准语言的列表。

React 快速入门

即使我已经更改了浏览器的语言，我的应用语言也没有改变。

为什么新语言加载需要很长时间？

为什么有些内容被翻译而其他内容没有？

在本页面