如何使用 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 withGarant 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>

应该工作