react-i18next 4 个 国际化 🌏 新手问题

本文价值 💰

弥补官方文档示例不全问题，因为分成两份文档 react.i18next.com & www.i18next.com 还把最佳示例都放在了外链中，导致很难直接看到想要的答案，本文将常遇到的新手问题一并总结下。

持续更新中敬请关注。欢迎关注公众号『JavaScript与编程艺术』

一、插值如何写 interpolation ➰

最基础的问题，但官方文档却不能让你一下子找到示例。

关键点使用双大括号 {{ }}

先定义

{
  greeting: "Hi {{ name }}."
}

使用

const hi = t('greeting', { name: 'James' }) // => "Hi James."

二、如何对 ReactNode 做插值 ⚛️

比如 Hi <b>{ name }</b>，而非普通的字符串 Hi {name}？

使用 Trans 组件。

import { Trans } from 'react-i18next'

<Trans i18nKey="greeting.name" values={{ name: person.name }}>
  Hi <b></b>
</Trans>

// zh.ts
'greeting.name': '你好 <1>{{ name }}</1> 吃饭了吗？',

Hi <b></b> 前后中无关紧要可以写任意值。比如 foo<b>bar</b>baz

三、函数中如何国际化？f(x)

useTranslation 是 hooks 只能在组件内部调用，如果在函数或 Node.js 中使用。可以使用 i18next 实例。

假若我们已经在 src/locales/i18n-init.ts 中使用 initReactI18next 初始化并导出了 i18n，则可使用 i18n.t 来获取翻译文本。

import i18n from '@/locales/i18n-init'

function statusToText(status: IModelStatus) {
  return i18n.t(`model.status.${status}`)
}

type IModelStatus = 0 | 1 | 2

// locales/zh/model.ts

export const model = {
  'status.0': '容器创建中'
  'status.1': '已发布'
  'status.2': '创建失败'
} as const

四、key 引用，即如何复用已有翻译？♻️

react-i18next 如何键引用，即 nesting，比如想要复用已有的翻译。

{ 
  name: 'Jack',
  hi: 'Hi {name}' // hi 这个key 想复用 name 的翻译。  
}

使得 t('hi') 能展示 "Hi Jack"，而无需传入 { name: 'Jack' }。

正确写法：'$t(key)'

{ 
  name: 'Jack',
  hi: 'Hi $t(name)' // 正确写法
}