# General Translation React SDKs (gt-react, gt-next, gt-react-native): React SPA 国际化
URL: https://generaltranslation.com/zh/docs/react/guides/spa/internationalizing-react-spa.mdx
Docs index: https://generaltranslation.com/llms.txt
Description: 如何在已配置的 React SPA 中标记 JSX 和可翻译内容。

SPA 初始化器在应用入口之前运行后，组件和
模块级字符串便可立即使用当前区域设置。本页汇总了
适用于该启动模式的实现规则。

## 翻译 JSX [#jsx]

使用 [`<T>` 组件](/docs/react/reference/components/t)包裹完整的可翻译 JSX 块。保持每个块内部
结构静态，绝不要在一个
[`<T>`](/docs/react/reference/components/t)中嵌套另一个：

```tsx title="src/components/Welcome.tsx"
import { T, Var } from 'gt-react';

type WelcomeProps = {
  name: string;
};

export default function Welcome({ name }: WelcomeProps) {
  return (
    <T>
      <h1>
        Welcome, <Var>{name}</Var>!
      </h1>
      <p>Your workspace is ready.</p>
    </T>
  );
}
```

对于未格式化的动态
值，请使用 [`<Var>`](/docs/react/reference/components/var)。当值需要按区域设置进行
格式化时，请使用 [`<Currency>`](/docs/react/reference/components/currency)、
[`<DateTime>`](/docs/react/reference/components/datetime) 和
[`<Num>`](/docs/react/reference/components/num)。

条件内容也必须具有稳定的翻译结构。对于具名备选项，请使用
[`<Branch>`](/docs/react/reference/components/branch)；对于依赖 count 的文本，请使用
[`<Plural>`](/docs/react/reference/components/plural)。如果条件会改变单个词以外的
语法，请在每个分支中使用完整句子。

[翻译 JSX](/docs/react/guides/translating-jsx)、
[格式化变量](/docs/react/guides/formatting-variables) 和
[处理复数和分支](/docs/react/guides/handling-plurals-and-branches)
提供了完整模式。

## 翻译字符串 [#strings]

在已初始化的 SPA 中，字符串应优先使用 [`t()`](/docs/react/reference/functions/t-function)。
引导过程会在导入应用程序前等待翻译加载完成，因此 [`t()`](/docs/react/reference/functions/t-function) 也可在
模块作用域中使用：

```ts title="src/navigation.ts"
import { t } from 'gt-react';

export const navigation = [
  { label: t('Home'), href: '/' },
  { label: t('About'), href: '/about' },
];
```

源消息必须为静态内容。请使用 ICU
语法单独传递动态值：

```ts
import { t } from 'gt-react';

const greeting = t('Hello, {name}!', { name: 'Ada' });
const attendees = t(
  '{count, plural, one {One person is here} other {# people are here}}',
  { count: 3 }
);
```

SPA 区域设置选择器会在区域设置更改后重新加载应用，因此模块级翻译会在新的区域设置下再次执行。有关上下文和共享消息模式，请参阅[翻译字符串](/docs/react/guides/translating-strings)。

## 添加区域设置选择器 [#locale-selector]

添加 [`<LocaleSelector>` 组件](/docs/react/reference/components/locale-selector)，
让用户选择语言：

```tsx title="src/components/LanguageMenu.tsx"
import { LocaleSelector } from 'gt-react';

export default function LanguageMenu() {
  return <LocaleSelector />;
}
```

它会读取为初始化器配置的区域设置，保存所选区域设置，并
重新加载 SPA，使模块级翻译使用新的区域设置。

## 验证实现 [#validate]

标记内容后，检查翻译语法：

```bash
npx gt validate
```

然后运行应用现有的类型检查和生产构建。生成翻译之前，修复所有翻译语法错误、缺失的区域设置文件或打包工具导入错误。

## Next steps

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

## Sitemap

See the full [sitemap](https://generaltranslation.com/sitemap.md) for all pages.