时间戳

首页 > 解决方案 > 如何使用 react-i18next Trans 组件编写默认翻译，即使用插值变量时有效的 JSX？

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

问题描述

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

我还想自动注册缺少的 i18n 翻译，以便将其正确添加到 Locize。（我正在使用 Locize 后端，它会自动创建缺少的键，因此我不必手动执行）

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

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

在 i18n 之前我有Garant N°${number}，现在我有Garant N°{{number}}， wherenumber是在运行时插值的。这与 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}了变量，它将被变量替换，这将硬编码默认翻译。这样不好。

我不知道如何解决这个问题，我可以使用另一个字符进行插值（而不是{}），但这需要我更新所有现有的代码，这很容易出错且很麻烦 + 所有翻译都依赖于变量。

标签： reactjsinternationalizationi18nextreact-i18next

解决方案

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

应该管用

推荐阅读