21

我正在使用 react、i18next和react-i18next。我想在文本中间插入一些带有 HTML 链接的可翻译文本，这些文本在反应中插值，如下所示： 

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} />
4

4 回答 4

27

With react-i18next v4.4.0 we introduced a new component Trans:

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

The json would be: See the <1>description</1> below.

or even more complex:

<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>

The new feature is documented here: https://react.i18next.com/latest/trans-component

于 2017-06-28T12:37:07.087 回答
5

这是react-intland的常见问题react-i18next- 这两个库对内联组件和翻译中的富文本格式的支持非常有限（我已经在这里详细描述了它）。

如果您仍处于项目的开始阶段，您可能需要考虑不同的 i18n 库 - js-lingui（免责声明：我是作者）。它是第一个（也是迄今为止唯一一个）完全支持内联组件的库。

你只需写：

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

您的翻译人员将使用消息See the <0>description</0> below.

唯一的代价是你需要使用额外的 babel 插件，这使得它成为可能。

于 2017-06-17T07:38:18.273 回答
0

您只需使用 t 属性将 Trans 标签链接到语言文件。标签之间的内容并不重要

<Trans i18nKey="cookieConsent.content" t={t}>
    x<Link to="/#privacy-policy">y</Link>z<Link to="/#legal">w</Link>
</Trans>
于 2021-12-21T06:52:18.727 回答
-4

<Interpolate i18nKey="my-label" useDangerouslySetInnerHTML link={url} /> 几周前添加的，并且允许插入包含 html 片段的此类翻译 - 请注意，如果 url 来自用户输入并包含恶意代码（xss 攻击），这很危险

正如我所看到的，这是去年添加的：https ://github.com/i18next/react-i18next/pull/195/files

但这将默认在 {{link}} 之前/之后的每个部分周围包裹一个跨度，因此这可能不是您所需要的......但解决方案相当简单 - 不要使用插值组件，而是在 t 函数上使用常规插值：

<div dangerouslySetInnerHTML={t('my-label', { link: yourURL }} />

于 2017-05-09T10:13:15.567 回答