翻译字符串

概述

本指南将带你了解如何在你的 React 应用中使用 useGT() hook 进行字符串国际化。

我们将涵盖以下内容：

何时使用 useGT() hook

如何使用 useGT() hook

使用变量

示例

常见陷阱

何时使用 `useGT()` 钩子

useGT() 钩子是一个 React 钩子，可用于翻译字符串。

在大多数情况下，你可以使用 <T> 组件。然而，在某些 JSX 不适用的场景下，可以使用 useGT() 钩子。

以下是一些更适合使用 useGT() 钩子的情况：

在只接受字符串的属性中，例如 placeholder 或 title 属性。
当字符串是更大对象的一部分时，例如：

const user = {
  title: 'Mr.',
  name: 'John',
  description: 'John is a software engineer at General Translation',
}

在这里，只有 description 属性需要被翻译。

在可能的情况下，你应该使用 <T> 组件。 <T> 组件允许你翻译 JSX 内容，是推荐的字符串翻译方式。

如何使用 `useGT()` 钩子

useGT() 钩子必须在 <GTProvider> 组件内部调用。

要翻译一段字符串，只需将该字符串直接传递给钩子返回的函数即可。

const translate = useGT();
translate('Hello, world!');

与传统的 i18n 库不同，useGT() 钩子不需要你向函数传递 key。相反，字符串会被直接传递给该函数。

这意味着你不需要使用字典！

使用变量

通常，你需要翻译包含变量的字符串。

例如，你可能需要翻译包含数值的字符串。

要添加变量，只需将变量作为占位符 {variable} 添加到字符串中，并将一个对象作为第二个参数传递给 hook 返回的函数。

const price = 100;
const translate = useGT();
translate('There are {count} items in the cart', { variables: { count: 10 } });

{count} 占位符会被 count 变量的值替换。

这样你就可以在翻译中显示动态值。

有关 API 的更多信息，请参阅 API 参考。

示例

在组件中翻译字符串

import { useGT } from 'gt-react';

export default function MyComponent() {
  const t = useGT();
  return (
    <div>
      <h1>{t('Hello, world!')}</h1>
    </div>
  )
}

export default function MyComponent() {
  return (
    <div>
      <h1>Hello, world!</h1>
    </div>
  )
}

翻译带变量的字符串

import { useGT } from 'gt-react';

export default function MyComponent() {
  const t = useGT();
  const count = 10;
  return (
    <div>
      <h1>{t('There are {count} items in the cart', { variables: { count } })}</h1>
    </div>
  )
}

export default function MyComponent() {
  const count = 10;
  return (
    <div>
      <h1>There are {count} items in the cart</h1>
    </div>
  )
}

翻译对象的部分内容

import { useGT } from 'gt-react';

export default function MyComponent() {
  const t = useGT();
  const users = [
    {
      name: 'John',
      description: t('John is a software engineer at General Translation'),
    },
    {
      name: 'Jane',
      description: t('Jane is a software engineer at Google'),
    },
  ]
  return (
    <div>
      {users.map((user) => (
        <div key={user.name}>
          <h1>{user.name}</h1>
          <p>{user.description}</p>
        </div>
      ))}
    </div>
  )
}

export default function MyComponent() {
  const users = [
    {
      name: 'John',
      description: 'John is a software engineer at General Translation',
    },
    {
      name: 'Jane',
      description: 'Jane is a software engineer at Google',
    },
  ]
  return (
    <div>
      {users.map((user) => (
        <div key={user.name}>
          <h1>{user.name}</h1>
          <p>{user.description}</p>
        </div>
      ))}
    </div>
  )
}

翻译共享常量

src/llms.ts

// Custom function to get LLM data with translations
export function getLLMData(t: (content: string) => string) {
  return [
    {
      name: 'GPT-4.1',
      id: 'gpt-4.1',
      description: t('GPT-4.1 is a large language model developed by OpenAI'),
    },
    {
      name: 'Claude 3.7 Sonnet',
      id: 'claude-3-7-sonnet',
      description: t('Claude 3.7 Sonnet is a large language model developed by Anthropic'),
    },
  ]
}

import { getLLMData } from './llms';
import { useGT } from 'gt-react';

export default function MyComponent() {
  const t = useGT();
  const llms = getLLMData(t);
  return (
    <div>
      {llms.map((llm) => (
        <div key={llm.id}>
          <h1>{llm.name}</h1>
          <p>{llm.description}</p>
        </div>
      ))}
    </div>
  )
}

src/llms.ts

export const llms = [
  {
    name: 'GPT-4.1',
    id: 'gpt-4.1',
    description: 'GPT-4.1 is a large language model developed by OpenAI',
  },
  {
    name: 'Claude 3.7 Sonnet',
    id: 'claude-3-7-sonnet',
    description: 'Claude 3.7 Sonnet is a large language model developed by Anthropic',
  },
]

import { llms } from './llms';

export default function MyComponent() {
  return (
    <div>
      {llms.map((llm) => (
        <div key={llm.id}>
          <h1>{llm.name}</h1>
          <p>{llm.description}</p>
        </div>
      ))}
    </div>
  )
}

在最后这个例子中，我们将 llms 数组转换为一个返回带有翻译数据的函数。我们将 t 函数传递给返回数据的函数。

或者，你也可以将 llms 数组转换为自定义 hook。但是，这不推荐，因为你需要非常小心地使用 useGT() hook，以免违反 React 的规则。

常见陷阱

翻译动态内容

所有字符串都必须在构建时已知。

这意味着你无法翻译在运行时生成或获取的动态内容。

这包括变量，即使它们是字符串。

export default function MyComponent() {
  const [dynamicContent, setDynamicContent] = useState('Hello, world!');
  const t = useGT();
  return (
    <div>
      <h1>{t(dynamicContent)}</h1> // This will not work
    </div>
  )
}

如果你尝试翻译动态内容，CLI 工具会发出警告

后续步骤

进一步了解 <T> 组件。
查看关于 useGT() 的 API 参考。

翻译字符串

为什么我不能直接导入 `llms` 数组？

为什么我不能翻译动态内容？

在本页面