如何使用函数调用提取 react-i18next 翻译？

Question

给定以下代码：

<Trans i18nKey="error" ns="login">
  <p className="error">
    {React.string("Incorrect username/password combination.")}
    <br />
    {React.string("Is Caps Lock turned on?")}
  </p>
</Trans>

注意 React.string 函数调用。

有没有办法使它与 i18next 一起工作？在 JSON 文件中，此键的值会是什么样子？

更新

在我的翻译 JSON 文件中，上面的代码应该怎么看？

"error": "<1>???</1>"

Answer 1

我不确定这个 React.string 方法是什么，但 Trans 的全部目的是在文本中集成样式标签。

文本应在翻译 (json) 文件中。

您的用法应如下所示：

<p className="error">
  <Trans i18nKey="error" ns="login" />
</p>

{
  "error": "Incorrect username/password combination.<br />Is Caps Lock turned on?"
}

顺便说一句，对于换行符，你可以避免 Trans 组件，你可以使用白色 space 和 css，有关更多信息，请阅读此答案：

如何使用函数调用提取 react-i18next 翻译？

How to extract react-i18next translation using function call?

i18next

react-i18next

更新