如何在 i18n 中使用包含标签的 JSON 键的 Trans

Question

我有一个用于翻译几种语言的 JSON 文件，如下所示：

'RESPONSIBLE': "<b>Responsible</b> is {{name}}"

在组件内部，我尝试使用不同的方式来使用 Trans 标签，例如：

<Trans i18nKey="RESPONSIBLE" name={'Jon'}></Trans>
// or
<Trans>{t('RESPONSIBLE', {name: 'Jon'})}</Trans>

最好的结果是：负责任的是乔恩。但仍然像字符串的一部分一样在 DOM 中标记。

另外，我对 json 也有同样的情况：

 "NO_ACTIVE": "Please go to the <a class=\"no-wrap\" href=\"{{link}}\">Go Here</a>"

我不能像这样正确地使用 Trans 作为键。当我尝试文档中的示例时它可以工作，但标签在 Trans 标签内，但在我的情况下它们在 json 键内

在这种情况下如何正确使用 Trans 标签？

Answer 1

关于<Trans> 的文档有点混乱，因为有不同的使用方法。您的解决方案是执行like this：

<Trans
  i18nKey="RESPONSIBLE"
  values={{ name: "Jon" }}
  components={{ bold: <b /> }}
/>