0Pricing
React Academy · 课时

使用 useTranslation 钩子

用 t() 调用替换硬编码字符串，并整理翻译 JSON 文件。

使用 useTranslation 钩子 是 CoddyKit 上的免费 React Academy 课时。 这是第 2 节课，共 4 节。 你可以在下方免费阅读本课时的完整内容 — 然后在浏览器中使用内置代码编辑器和全天候 AI 导师进行实践。 这是 React Academy 学习路径的一部分，你的进度在网页和 CoddyKit 应用中同步。 React Academy 课程共包含 4 节课。

欢迎

在本课中，您将使用 useTranslation 钩子访问 t() 函数，在组件中翻译字符串，并按命名空间整理 JSON 翻译文件。

useTranslation 钩子

在组件内调用 useTranslation()，以获取 `t` 翻译函数和 `i18n` 实例。使用命名空间翻译时，请传入命名空间名称。
import { useTranslation } from 'react-i18next';

function Header() {
  const { t } = useTranslation('common');
  return <h1>{t('app_title')}</h1>;
}

基本翻译键

为每种语言和命名空间创建一个 JSON 文件。键是可通过点号访问的字符串。扁平键比较简单；嵌套键使用点号表示法。
// public/locales/en/common.json
{
  "app_title": "My App",
  "nav": {
    "home": "Home",
    "about": "About"
  }
}

点号表示法键

在 t() 函数中使用点号表示法访问嵌套键：`t('nav.home')` 会从 JSON 中读取 `nav -> home`。
const { t } = useTranslation('common');
return <a href="/">{t('nav.home')}</a>;

默认命名空间

在 i18n init 中配置 `defaultNS`，这样您就可以不带参数调用 useTranslation()，键也会自动解析到默认命名空间。
i18n.init({ defaultNS: 'common', ... });

// No namespace argument needed
const { t } = useTranslation();
t('app_title'); // resolves in 'common'

访问多个命名空间

向 useTranslation 传入数组即可访问多个命名空间。为键添加命名空间前缀，后面跟一个冒号。
const { t } = useTranslation(['common', 'auth']);

t('common:app_title');
t('auth:login');

用于 JSX 内容的 Trans 组件

当翻译字符串包含 HTML 或 React 组件时，请使用 Trans 组件。它支持映射到 React 组件的占位符。
import { Trans } from 'react-i18next';

// JSON: "tos": "Read our <1>Terms</1>"
<Trans i18nKey="tos">
  Read our <a href="/terms">Terms</a>
</Trans>

翻译文件结构

将 JSON 文件组织为 `public/locales/{lang}/{ns}.json`。键应具有语义，并按功能分组。避免使用层级过深的键——通常两层就足够了。
public/
  locales/
    en/
      common.json
      auth.json
      dashboard.json
    tr/
      common.json
      auth.json

运行时切换语言

使用 `i18n.changeLanguage(lng)` 以编程方式切换当前语言。使用 useTranslation 的 React 组件会自动重新渲染。
const { i18n } = useTranslation();

<button onClick={() => i18n.changeLanguage('tr')}>Turkish</button>

检测当前语言

读取 `i18n.language` 获取当前活动区域设置。您可以用它来显示国旗，或突出显示当前语言按钮。
const { i18n } = useTranslation();
return <p>Current lang: {i18n.language}</p>;

快速检查

如何从 common 命名空间访问嵌套翻译键 'nav.home'？

回顾

useTranslation 会提供 t() 函数。将键整理到命名空间 JSON 文件中。嵌套键使用点号表示法。使用 i18n.changeLanguage 切换语言。对于包含 JSX 的字符串，请使用 Trans 组件。

接下来

下一课：**复数形式与插值**——您将处理基于数量的复数形式，并将动态值插入翻译字符串。

常见问题解答

「使用 useTranslation 钩子」课时是免费的吗？

是的 — 「使用 useTranslation 钩子」的完整文本可在网页上免费阅读。要进行交互式练习（内置代码编辑器和全天候 AI 导师）并解锁 React Academy 课程的其余内容，请升级到 CoddyKit PRO。 React Academy 课程共包含 4 节课。

「使用 useTranslation 钩子」这节课中我会学到什么？

用 t() 调用替换硬编码字符串，并整理翻译 JSON 文件。 你通过在浏览器中直接运行的动手代码来练习 React Academy，全天候 AI 导师会在你学习这节课的过程中回答你的问题。

学习 React Academy 需要有经验吗？

无需任何先前经验。CoddyKit 上的 React Academy 课程适合初学者到高级学习者，你可以从这里开始或从头开始，按照自己的节奏学习。 这是第 2 节课，共 4 节。

「使用 useTranslation 钩子」课时需要多长时间？

大多数 CoddyKit 课程大约需要 5–10 分钟。每节课都很精短且互动，所以你能稳步进步，并在网页和应用中从离开的地方继续。

我能在这节 React Academy 课中编写并运行代码吗？

能。每节 React Academy 课都包含内置代码编辑器，你可以在浏览器中直接编写并运行真实代码，并获得即时 AI 反馈 — 无需本地设置。

此课程中的所有课时

  1. 设置 react-i18next
  2. 使用 useTranslation 钩子
  3. 复数形式与插值
  4. 语言切换器与翻译延迟加载
← 返回 React Academy