如何使用react-i18next Trans组件编写默认翻译，当使用插值变量时该组件是有效的JSX？

Question

我正在尝试使用i18next和react-18next翻译硬编码的文本（无i18n）。因为我尝试翻译的内容本身包含节点，所以我使用的是Trans组件。

我还想自动注册缺少的i18n译文，以便将其正确添加到Locize中。 （我使用的是Locize后端，它会自动创建丢失的键，这样就不必手动进行操作了。）

首先，当内容不包含任何节点时，我将展示如何使用t组件。

<Heading
  header={t('heading1, `Garant N°{{number}}`, {number})}
>

[在i18n之前我有Garant N°${number}，现在有Garant N°{{number}}，其中在运行时对number进行了插值。使用react可以很好地工作，并且i18n键heading1被自动添加到Locize中，并使用Garant N°{{number}}作为默认语言的翻译。

---

现在，让我们看看如何使用包含节点的内容来做到这一点，因此必须在何时使用Trans：

Hello {name}, you can subscribe
<a
  href={'#'}
  onClick={this.doSomething}
>here</a>{' '}
to fetch your discount

i18n之后：

<Trans
  i18nKey={'myKey'}
  values={{
    name: 'John',
  }}
>
  Hello {{name}}, you can subscribe
  <a
    href={'#'}
    onClick={this.doSomething}
  >here</a>{' '}
  to fetch your discount
</Trans>

使用{{name}}是i18next内部人员期望执行插值的方法，但它不是有效的JSX，因为react会认为name是JS变量，如果变量未定义，它将在运行时引发错误，它还会在我的IDE中显示该变量未定义（警告）。如果定义了变量，它将用该变量替换{name}，这将对默认转换进行硬编码。不好。

我不知道如何解决此问题，我可以使用其他字符进行插值（而不是{}），但这将要求我更新所有现有代码，这很容易出错且麻烦+所有翻译依靠变量。

Answer 1

<Trans
  i18nKey={'myKey'}
>
  Hello {{name: 'John'}}, you can subscribe
  <a
    href={'#'}
    onClick={this.doSomething}
  >here</a>{' '}
  to fetch your discount
</Trans>

应该工作