# General Translation React SDKs (gt-react, gt-next): 翻译字符串
URL: https://generaltranslation.com/zh/docs/react/guides/translating-strings.mdx
---

title: 翻译字符串
description: 如何在 React、Next.js、TanStack Start 和 React Native 中使用 General Translation 的 useGT 钩子翻译独立字符串，例如标签和占位符。
related:
  links:
    - /docs/react/guides/translating-jsx
    - /docs/react/guides/formatting-variables
    - /docs/react/guides/handling-plurals-and-branches
    - /docs/react/guides/translating-with-dictionaries

---

有些文本并不是 JSX——例如占位符、`aria-label`、alt 文本，以及你在代码中拼接出的字符串。请使用 [`useGT`](/docs/react/reference/hooks/use-gt) 钩子来翻译这些内容。在异步 App Router 组件中，请改用 [`getGT`](/docs/react/nextjs/reference/functions/get-gt)。

## 使用 `useGT` 翻译 [#use-gt]

调用 `useGT` 获取翻译函数，然后向它传入源字符串。`useGT` 会直接返回这个函数。

<Tabs items={['React', 'Next.js', 'TanStack Start', 'React Native']}>
  <Tab value="React">
    ```tsx
    import { useGT } from 'gt-react';

    function Search() {
      const gt = useGT();
      return <input placeholder={gt('Search products')} aria-label={gt('Search')} />;
    }
    ```
  </Tab>

  <Tab value="Next.js">
    ```tsx title="同步组件"
    import { useGT } from 'gt-next';

    function Search() {
      const gt = useGT();
      return <input placeholder={gt('Search products')} aria-label={gt('Search')} />;
    }
    ```

    ```tsx title="异步 App Router 组件"
    import { getGT } from 'gt-next/server';

    async function Search() {
      const gt = await getGT();
      return <input placeholder={gt('Search products')} aria-label={gt('Search')} />;
    }
    ```
  </Tab>

  <Tab value="TanStack Start">
    ```tsx
    import { useGT } from 'gt-tanstack-start';

    function Search() {
      const gt = useGT();
      return <input placeholder={gt('Search products')} aria-label={gt('Search')} />;
    }
    ```
  </Tab>

  <Tab value="React Native">
    ```tsx
    import { useGT } from 'gt-react-native';

    function Search() {
      const gt = useGT();
      return <TextInput placeholder={gt('Search products')} accessibilityLabel={gt('Search')} />;
    }
    ```
  </Tab>
</Tabs>

*注意：请写成 `const gt = useGT()`——这个钩子返回的是函数本身，不是对象。请传入字符串字面量，而不是模板字面量或拼接结果，这样 CLI 才能提取它。*

## 插入变量 [#variables]

使用 ICU 消息语法和命名占位符，并在 options object 中传入相应的值。各个框架中的用法都完全相同。

```tsx
const gt = useGT();
gt('Welcome back, {name}!', { name: user.name });
```

## 添加上下文 [#context]

传入 `$context` 以消除字符串的歧义，并传入 `$id` 为其指定一个稳定的标识符。

```tsx
gt('Bank', { $context: 'a bank of a river' });
```

## 复用在组件外定义的字符串 [#shared]

如果要在模块作用域中为常量、枚举或配置定义可翻译字符串，请用 [`msg`](/docs/react/reference/functions/msg) 注册，并用 [`useMessages`](/docs/react/reference/hooks/use-messages) 取出对应内容。在异步 App Router 组件中，则应改用 [`getMessages`](/docs/react/nextjs/reference/functions/get-messages)。用 `msg` 注册一次字符串，然后在渲染处取用即可。

<Tabs items={['React', 'Next.js', 'TanStack Start', 'React Native']}>
  <Tab value="React">
    ```tsx
    import { msg, useMessages } from 'gt-react';

    const STATUS = { active: msg('Active'), paused: msg('Paused') };

    function Badge({ status }: { status: 'active' | 'paused' }) {
      const m = useMessages();
      return <span>{m(STATUS[status])}</span>;
    }
    ```
  </Tab>

  <Tab value="Next.js">
    ```tsx title="同步组件"
    import { msg, useMessages } from 'gt-next';

    const STATUS = { active: msg('Active'), paused: msg('Paused') };

    function Badge({ status }: { status: 'active' | 'paused' }) {
      const m = useMessages();
      return <span>{m(STATUS[status])}</span>;
    }
    ```

    ```tsx title="异步 App Router 组件"
    import { msg } from 'gt-next';
    import { getMessages } from 'gt-next/server';

    const STATUS = { active: msg('Active'), paused: msg('Paused') };

    async function Badge({ status }: { status: 'active' | 'paused' }) {
      const m = await getMessages();
      return <span>{m(STATUS[status])}</span>;
    }
    ```
  </Tab>

  <Tab value="TanStack Start">
    ```tsx
    import { msg, useMessages } from 'gt-tanstack-start';

    const STATUS = { active: msg('Active'), paused: msg('Paused') };

    function Badge({ status }: { status: 'active' | 'paused' }) {
      const m = useMessages();
      return <span>{m(STATUS[status])}</span>;
    }
    ```
  </Tab>

  <Tab value="React Native">
    ```tsx
    import { msg, useMessages } from 'gt-react-native';

    const STATUS = { active: msg('Active'), paused: msg('Paused') };

    function Badge({ status }: { status: 'active' | 'paused' }) {
      const m = useMessages();
      return <Text>{m(STATUS[status])}</Text>;
    }
    ```
  </Tab>
</Tabs>
## Next steps

- /docs/react/guides/translating-jsx
- /docs/react/guides/formatting-variables
- /docs/react/guides/handling-plurals-and-branches
- /docs/react/guides/translating-with-dictionaries