Reactjs 如何在Next-i18next/React i18next中插入改变文本位置的链接组件

目前我将Next.js与Next-i18next一起用于I18N，但我知道React/i18next实现基本相同

我遇到的问题是，我需要在一些翻译文本中插入下一个链接组件，但根据语言（英语和德语），文本和链接的顺序会发生变化。 例如，我正在挣扎的文本是：“接受数据策略”与“Datenschutzerklärung akzeptieren”

到目前为止，我有一个快速修复方法，在翻译JSON文件中为文本和链接创建两个值，然后根据当前语言交换位置。显然，这不是一个可持续的解决办法。我曾尝试使用“Trans”组件，但这显示出一些意外行为，即翻译仅在页面刷新后才开始，否则您将看到Trans组件中的文本

例如：

函数链接文本（{href，children}）{
返回{children}；
}
返回(
链接前的文本
{t（“数据策略”）}
链接后的文本
);

以及讨论中的JSON：

{
“句子”：“同意我们的观点”，
“数据策略”：“数据策略”
}

这里有一个指向CodeSandbox的链接，我创建该链接是为了复制React中的问题：

（注：i18next的实现目前似乎无法有效地替换Codesandbox中的语言，但我将其包括在内，因为代码是用于MWE的）

---

提前谢谢你的帮助，这让我发疯。

你少了几个零件

我补充道，您的i18next配置缺少获取区域设置文件的方法

您应该使用

Trans

组件将链接插入句子。 您的区域设置json应该如下所示：

{
“句子”：“接受数据策略”
}

//TranslatedLink.js
从“React”导入React；
从'react-i18next'导入{useTranslation，Trans}；
从'react router dom'导入{Link}；
函数链接文本（{href，children}）{
返回{children}；
}
导出默认函数TranslatedLink（）{
const{t}=useTranslation（['common']）；
返回(
);
}

---

工作示例：

您缺少的零件很少

我补充道，您的i18next配置缺少获取区域设置文件的方法

您应该使用

Trans

组件将链接插入句子。 您的区域设置json应该如下所示：

{
“句子”：“接受数据策略”
}

//TranslatedLink.js
从“React”导入React；
从'react-i18next'导入{useTranslation，Trans}；
从'react router dom'导入{Link}；
函数链接文本（{href，children}）{
返回{children}；
}
导出默认函数TranslatedLink（）{
const{t}=useTranslation（['common']）；
返回(
);
}

---

一个有效的例子：

难以置信！非常感谢。我个人发现Trans文档有点难以获取。我以前见过components道具，但没有意识到我也应该传递't'实例。再次感谢！难以置信的非常感谢。我个人发现Trans文档有点难以获取。我以前见过components道具，但没有意识到我也应该传递't'实例。再次感谢！