react-i18next并用组件替换占位符键

Question

以前我使用react-intl并且能够为可以用组件替换的项目设置占位符，例如{br}与<br />。

我正在尝试使用react-i18next和i18next-icu时遇到错误：

// Using Intl format (via i18next-icu)
{
  "test": "Replace with a{br}line-break. {button}"
}

t("test", { br: <br />, button: <button>Click me!</button> });

// Outputted translated text
Replace with a[object Object]line-break. [object Object]

实际上是否可以使用i18next / i18next-icu来做到这一点？如果没有，那么将组件插入到翻译的字符串中的另一种方法是什么？

Answer 1

https://react.i18next.com/latest/trans-component会在您的翻译中包含反应成分（如br，strong，...）