Lingui中使用t宏实现带参数的组件外动态翻译方案

1. 定义带插值的翻译条目 #

在Lingui的语言资源文件中分别配置英文和匈牙利语的翻译内容：

• 英文资源（en.json）：

{
  "userPayments": "User {id} payments"
}

• 匈牙利语资源（hu.json）：

{
  "userPayments": "Felhasználó {id} fizetései"
}

2. 调用t宏时传入变量参数 #

修改现有代码，在调用t宏时通过参数对象传递id变量：

title: (id, i18n) => t(i18n)`userPayments`({ id })

如果是React项目使用Lingui JSX宏，写法如下：

title={(id) => <Trans id="userPayments" values={{ id }} />}

关键说明 #

• 翻译文本中的{id}占位符要和传递的变量名严格对应。
• 确保已正确初始化Lingui的i18n实例，加载了对应语言的资源文件，并且当前语言环境已切换到目标语言（英文/匈牙利语）。

内容的提问来源于stack exchange，提问作者Laczkó Örs