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

国际化后：

<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>

应该可以

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

How to write the default translation with react-i18next Trans component, that is valid JSX when using interpolated variables?

internationalization

i18next

reactjs

react-i18next