---
title: 运行时
description: 加载语言词典，并通过 React 组件和 Hooks 使用消息。
order: 11
toc:
  - id: load-the-catalog
    title: 加载词典
  - id: provide-the-locale
    title: 提供语言
  - id: translate-content
    title: 翻译内容
---

## 加载词典 {#load-the-catalog}

生成的词典加载器同时支持开发、生产和 SSR 构建：

```tsx
import { use } from "react"
import { loadMessageCatalog } from "@workspace/i18n/catalogs"

const messages = use(loadMessageCatalog(locale))
```

## 提供语言 {#provide-the-locale}

```tsx
<I18nProvider
  locale={locale}
  locales={[
    { locale: "en-US", label: "English" },
    { locale: "zh-Hans", label: "简体中文" },
  ]}
  catalogs={{ [locale]: messages }}
>
  {children}
</I18nProvider>
```

## 翻译内容 {#translate-content}

JSX 内容使用 `Translate`，命令式翻译函数使用 `useTranslate`，单个描述符使用 `useMessage`。`useLocale`、`useLocales` 和 `useFormatters` 提供语言状态与 `Intl` 格式化器。

`Translate` 会直接委托给 Lingui，不会增加额外的 DOM 包装元素。