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>
        这将被翻译。
      </p>
    </T>  
  );
}

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

Example.js

import { T, Var } from "gt-react";
 
export default function Example() {
  return (
    <T>
      <p>
        这将被翻译。 <Var>这不会。</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("这将被翻译。")}
    </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 快速入门

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

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

为什么有些内容翻译了而有些没有？

在本页面