如何正确使用react-i18next<Trans>组件

Question

在 github 上的示例以及其他地方，react-i18next 似乎建议我们应该通过填充某种文本来使用他们的 Trans 组件，据我了解，这些文本不会以任何方式出现在生成的应用程序中因为它会被默认区域设置覆盖。这是为了什么？它只是为了确保 React 不会优化掉组件吗？

Answer 1

一个老问题，但是这里这个很棒的资源确实帮助我了解了

<Trans />

组件。

Answer 2

因此，在做了更多研究并尝试了一些建议之后，似乎推荐的使用方法

<Trans>

是使用默认文本作为自动生成的翻译文件中的键，所以

<Trans>Lorem ipsum</Trans>

在你的代码中会给你

{"Lorem ipsum": "Lorem ipsum"}

在您的默认语言环境文件中，然后可以像这样翻译

{"Lorem ipsum": "Löksås yxskaft"}

Answer 3

有一段文字需要翻译：

<p>Please enter the <strong>IP-address</strong> and <strong>port</strong> of the KNX gateway</p>

在英文翻译文件中，我们添加了一个翻译选项，其中标签中的数字是由这些标签分隔的文本段的序号。

"KNX_ip_and_port": "Please enter the <1>IP address</1> and <3>port</3> of the KNX gateway"

我们对翻译文件执行相同的操作，例如俄语。

"KNX_ip_and_port": "Пожалуйста, введите <1>IP-адрес</1> и <3>порт</3> шлюза KNX"

最后，我们将段落内容替换为带序列号的反式组件，而不是原文。

<p>
    <Trans i18nKey="KNX_ip_and_port">
        0<strong>1</strong>2<strong>2</strong>4
    </Trans>
</p>