目前我使用Next.js和Next-i18 next for I18 N,但我知道React/i18 next实现基本上是一样的。
我遇到的问题是,我需要在一些翻译文本中插入下一个链接组件,但根据语言(英语与德语),文本和链接的顺序会改变。例如,我正在努力的文本是:'Accept data policy'与'Datenschutzerklärung akzeptieren'
目前,我有一个快速解决方案,在翻译JSON文件中为文本和链接创建两个值,然后根据当前语言交换位置。显然,这不是一个可持续的解决方案。我曾尝试使用'Trans'组件,但这显示了一些意想不到的行为,其中翻译只有在页面刷新后才会启动,否则您会看到Trans组件中的文本。
例如:
function LinkText({ href, children}) {
return <Link to={href || ''}>{children}</Link>;
}
return (
<Trans i18nKey="sentence">
text before link
<LinkText href="/data-policy">{t("dataPolicy")}</LinkText>
text after link
</Trans>
);
JSON的问题:
{
"sentence": "agree to our <1><0/></1>",
"dataPolicy": "data policy"
}
下面是我制作的CodeSandbox的链接,用于在React中复制问题:link
(P.S i18 next的实现目前似乎没有有效地交换Codesandbox中的语言,但我将其包括在内,因为代码是MWE的)
谢谢你的帮助,这已经让我疯了。
1条答案
按热度按时间wecizke31#
你身上少了几个零件,
1.你的i18next配置缺少一种获取本地文件的方法,我已经添加了i18next-http-backend。
1.您应该使用
Trans
组件来注入到句子的链接。你的locale json应该看起来像这样:一个工作示例:https://codesandbox.io/s/react-i18n-interpolation-issue-forked-ck8l4
编辑
另一个可能的选项是将对象作为
components
传递并将JSON更改为使用具有object属性的标签,