I18next 翻译中的 HTML 标记

小开

最佳答案

为了实现这一点，您必须为要用 [html]翻译的元素的 data-i18n属性加上前缀:

<div class="i18n" data-i18n="[html]content.body">

资料来源: I18next.jquery.js

小开

来自文件:

提示3: 逃避:
// given resources
{
'en-US': {
translation: {
key1: Not escaped __nameHTML__,
key2: Escaped __name__
}
}
};


i18n.t("key2", { name: '', escapeInterpolation: true }); // -> Escaped &lt;tag&gt;
i18n.t("key1", { name: '', escapeInterpolation: false }); // -> Not escaped <tag>
将后缀‘ HTML _ _’添加到您的值中将阻止转义，即使选项被设置为。

您可以打开 init < code > i18n.init ({ escape eInter : 或者像示例中一样传入 t 函数的选项

小开

你需要关闭逃跑:

i18n.t("key", { 'interpolation': {'escapeValue': false} })

小开

i18n.t('key',{dateStr: date, interpolation: {escapeValue: false}})

如果为我工作的 date='15/10/2020'，斜线保持以及

小开

对于任何试图在 做出反应中执行此操作的人(例如使用 react-i18-next) ，请注意 React 还有会转义字符串！所以我们必须告诉都有i18n 和 React 不要逃脱字符串。

为了告诉 i18n 跳过转义，我们使用 {escapeValue: false}，正如其他示例所示。
要告诉 React 跳过转义，我们使用 React 的 dangerouslySetInnerHTML属性。

<div dangerouslySetInnerHTML={
{__html: t('foo', {interpolation: {escapeValue: false}})}
} />

该属性接受具有一个属性 __html的对象。反应故意使其丑陋，以阻止其使用，因为不逃跑可能是危险的。

为安全起见，不应在此元素内使用原始用户输入。如果您确实需要在此处使用不受信任的字符串，请确保对其进行消毒或转义，以便用户不能将原始 <或 >注入到页面中。

小开

我同时使用了 React 和 React Native. 对于 React 应用程序，这个解决方案是有效的。

做出反应
I18n.js

interpolation: {
escapeValue: false
}

一些文件 jsx

<div dangerouslySetInnerHTML=\{\{__html: t('dropZone.description')}} />

本土反应
这个解决方案不起作用，因为在 Text 标记中不允许 < div > 。我尝试将危险的 lySetInnerHTML 添加到 Text 标记中，但是什么都看不见。

有人有“反应原住民”的解决方案吗？

小开

可以在全局初始化期间关闭转义:

i18n.init({
// ...
interpolation: {
escapeValue: false,
}
});

小开

不要在翻译中使用 HTML 标记。反正这也不是个好主意。关注点分离的人会为此发牢骚的。

如果 反应 -i18接下来[ https://react.i18next.com/latest/trans-component ][1] ，则使用 <Trans>组件

这样做:

// Component.js


<Trans>Welcome, <strong>User!</strong>, here's your <strong>broom</strong></Trans>

还有相应的翻译文件:

// your locales/starwars_en.js file


translations: {
"Welcome, <1>User!</1>, here's your <3>broom</3>": "Welcome, <1>young padawan!</1>, here's your <3>light saber</3>",
}

这些数字 < 1 >和 < 3 >会让你觉得是随机的，但请等待:

Trans.children = [
'Welcome, ',                        // index 0
'<strong>User!</strong>'            // index 1
', please don't be ',               // index 2
'<strong>weak</strong>',            // index 3
' unread messages. ',               // index 4
]

更多信息请点击: https://stackoverflow.com/a/62563302/537648

小开

ReactJS 的解决方案:

初始部分:

...
<Typography>Hello <b>World</b><br />This is an <strong>example</strong></Typography>
...

对反应 -i18接下来使用交织

...
import { Markup } from "interweave"
...
<Typography><Markup content={t("paragraph")} /></Typography>
...

还有你的 en.json 文件:

{
"paragraph": "Hello <b>World</b><br />This is an <strong>example</strong>"
}

Es.json:

{
"paragraph": "Hola <b>Mundo</b><br />Esto es un <strong>ejemplo</strong>"
}

更多信息: 给你

小开

这是“反应”的答案。

最终找到了一个直接的解决方案，可以使代码更容易维护。希望这有所帮助！

{
"stackoverflow": "<site_anchor>Welcome to stackoverflow!</site_anchor> You can also <profile_anchor>check my profile</profile_anchor>"
}

import {Trans} from "react-i18next";

<Trans i18nKey="stackoverflow" components=\{\{
site_anchor: <Link href="https://stackoverflow.com" target="_blank"/>,
profile_anchor: <Link href="https://stackoverflow.com/users/18131146/mondayrris" target="_blank"/>,
}} />

小开

我只需要使用粗体文本，所以我使用了以下代码:

<Trans i18nKey='translationKey' values=\{\{ name: 'ANY_VALUE' }} />

翻译键-> Do you want to remove <strong>\{\{name}}</strong> ...? 在 < a href = “ https://react.i18next.com/update/trans-Component”rel = “ nofollow norefrer”> i18n 文档中找到了这个解决方案

小开

对于使用 react-i18next软件包 v11.6^的 React应用程序，你可以平滑地使用 Trans组件来应用 html 标签和翻译文本，我将用一个简单的例子说明这一点:

在我们的文本翻译文件中，我们有:

 greetings: 'Hello \{\{name}}!'

我们希望使用 html 标记 strong对名称变量应用粗体样式，这样我们可以:

 greetings: 'Hello <0>\{\{name}}</0>!'

然后，在我们想要使用转换的地方，我们从 react-i18next导入 Trans组件，并像这样使用它:

<Trans
i18nKey='greetings'
values=\{\{
name: 'John'
}}
components={[<strong />]}
/>

然后结果将是: 您好约翰！