javascript – react-i18next：在文本中间的HTML标记中插入链接

2023年12月21日 348次阅读

我正在使用react, i18next和 react-i18next.我想在文本中间有一些带有HTML链接的可翻译文本,这些文本在react中进行插值,如下所示：

This is my text with <a href="{{link}}">a beautiful link</a> in the middle of the text

下面的解决方案有效,但问题是我需要在反应中插入链接,因此它不能在标签文件中进行硬编码：

"my-label": "This is my text with <a href=\"http://google.com\">a beautiful link</a> in the middle of the text"

[...]

<Interpolate i18nKey="my-label" useDangerouslySetInnerHTML />

看起来好多了：

"my-label": "This is my text with {{link}} in the middle of the text",
"link" "a beautiful link"

[...]

const { url } = props;
const link = <a href={url}>{t('link')}</a>

<Interpolate i18nKey="my-label" link={link} />

可能是解决方案,但是应用程序被翻译成多种语言并且翻译质量非常重要,所以我更倾向于将整个文本放在一行中用于翻译(这对于有案例的语言尤为重要).

有没有办法如何让这样的工作(或者有什么方法可以完全不同地解决它)？

"my-label": "This is my text with <a href=\"{{link}}\">a beautiful link</a> in the middle of the text"

[...]

const { url } = props;

<Interpolate i18nKey="my-label" useDangerouslySetInnerHTML link={url} />

最佳答案 使用react-i18next v4.4.0,我们引入了一个新组件Trans：

<Trans i18nKey="optionalKey">See the <Link to="/more">description</Link> below.</Trans>

json将是：参见< 1>描述< / 1>下面.

甚至更复杂：

<Trans i18nKey="userMessagesUnread" count={count}>
Hello <strong title={t('nameTitle')}>{{name}}</strong>, you have {{count}} unread message. <Link to="/msgs">Go to messages</Link>.
</Trans>

这里记录了新功能：https://react.i18next.com/components/trans-component.html

点赞