乐闻世界logo
6月1日 09:25

React 项目怎么用 react-i18next？useTranslation/Trans/HOC 详解

react-i18next 是 i18next 的 React 绑定层，核心 API 有三个：useTranslation Hook、withTranslation HOC、Trans 组件。useTranslation 是最常用的方式，返回 t 函数和 i18n 实例，组件内调用 t('key') 即可获取翻译文本，语言切换时自动重渲染。withTranslation 是类组件的对应方案，通过 props 注入 t 函数。Trans 组件用于处理含 HTML 标签的翻译，如 Hello <bold>World</bold>，翻译文件中对应 Hello <1>World</1>，避免用 dangerouslySetInnerHTML。I18nextProvider 用于向组件树注入 i18n 实例，通常在根组件外层包裹一次即可。Suspense 配合方面，当使用异步加载后端时，翻译资源未就绪会触发 Suspense fallback，需在 init 时设置 react.useSuspense: true。

追问

useTranslation 如何指定命名空间？

js
const { t } = useTranslation('common');
t('greeting'); // 读取 common 命名空间的 key

// 同时使用多个命名空间
const { t } = useTranslation(['common', 'auth']);
t('common:title');
t('auth:login');

Trans 组件的索引规则是什么？

Trans 按子元素出现顺序编号，从 0 开始，纯文本节点不占索引（旧版行为），标签节点占索引。React 中组件包裹也算一个节点：

jsx
<Trans>Read <a href="/doc">the doc</a> for details</Trans>
// 翻译文件：Read <1>the doc</1> for details

空字符串节点和换行符是否占索引取决于 i18next 版本，建议用 i18next-parser 自动提取。

类组件如何使用 react-i18next？

jsx
import { withTranslation } from 'react-i18next';

class MyComponent extends React.Component {
  render() {
    const { t } = this.props;
    return <p>{t('hello')}</p>;
  }
}

export default withTranslation()(MyComponent);

withTranslation 支持 withTranslation(['ns1', 'ns2']) 指定命名空间。

Suspense 模式下加载失败怎么处理？

在 Suspense 外层的 ErrorBoundary 中捕获加载异常，展示降级 UI。也可关闭 Suspense 模式，改用 t() 的 fallback key 机制：t('key', '默认文本')，当资源未加载时直接返回默认值。

标签：i18next