javascript React中i18next翻译文件中的HTML标签

o2gm4chl 于 2023-04-10 发布在 Java

关注(0)|答案(4)|浏览(256)

我在一个项目中使用i18next，无法在翻译文件中包含html标签并正确渲染它们。
我的.json翻译文件的例子：

"en": {
  "product": {
    "header": "Welcome, <strong>User!</strong>"
  }
}

有一个excellent answer to this question，但与jQuery有关。我没有使用jQuery，我的项目是React，这是我的设置：

import i18next from 'i18next';
import en from 'locales/en';

i18next.
  init({
    lng: 'en',
    fallbackLng: false,
    resources: en,
    debug: false,

    interpolation: {
      escapeValue: false
    }
  });

export default i18next.t.bind(i18next);

在组件I中具有：

import t from 'i18n';

t('product.header')

我想要的Html：

Welcome, <strong>User!</strong>

我得到的html：

Welcome, &lt;strong&gt;User!&lt;/strong&gt

谢谢

JavaScript

来源：https://stackoverflow.com/questions/39836369/html-tags-in-i18next-translation-files-in-react

4条答案

按热度按时间

33qvvth11#

不要在翻译中加入HTML标签。无论如何这是个坏主意。* 关注点的分离 * 人们会对它发牢骚。
如果react-i18 nexthttps://react.i18next.com/latest/trans-component，则使用<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
]

旁注（可以被认为是一个黑客，但节省了大量的时间）：www.example.com的家伙react.i18next.com，在他们的文档中没有这个，但你可以使用基本语言作为键（在这种情况下是英语）。它节省了你的时间，而不是像他们在文档中显示的那样重复翻译，我引用：

// Component file

import React from 'react';
import { Trans } from 'react-i18next'

function MyComponent({ person, messages }) {
  const { name } = person;
  const count = messages.length;

  return (
    <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>
  );
}

// translation file

"userMessagesUnread": "Hello <1>{{name}}</1>, you have {{count}} unread message. <5>Go to message</5>.",
"userMessagesUnread_plural": "Hello <1>{{name}}</1>, you have {{count}} unread messages.  <5>Go to messages</5>.",

无论如何，“荣誉！”给i18 next团队！你们太棒了，伙计们！
给你-去疯吧！

赞(0）回复(0）举报 2023-04-10

qzlgjiam2#

从react-i18next@11.6.0开始，你可以在翻译字符串中使用标签，并在Trans组件中使用components prop或从useTranslation钩子中使用t属性来替换它：
https://react.i18next.com/latest/trans-component#using-with-react-components
用法示例：

<Trans
  i18nKey="myKey" // optional -> fallbacks to defaults if not provided
  defaults="hello <italic>beautiful</italic> <bold>{{what}}</bold>" // optional defaultValue
  values={{ what: 'world'}}
  components={{ italic: <i />, bold: <strong /> }}
/>

赞(0）回复(0）举报 2023-04-10

mf98qq943#

这不是react-i18 next的问题-你只是不能在react元素中添加html。react将保护你免受xss漏洞的影响并逃避内容：
更多细节和可能的解决方案：https://facebook.github.io/react/tips/dangerously-set-inner-html.html
但要注意，如果你把用户的内容没有逃脱你打开你的网站的xss攻击。
阅读react-i18 next自述文件更安全：https://github.com/i18next/react-i18next#interpolate-component
这让你可以把内容
所以“最好”的解决方案-至少我们所做的-是在翻译中使用markdown，并使用例如：https://github.com/acdlite/react-remarkable将其转换为格式化的内容。

赞(0）回复(0）举报 2023-04-10

yrefmtwq4#

首先，你需要像这样写你的json文件：
“en”：{“欢迎”：“欢迎”，“用户”：“用户”}
然后按如下方式编写HTML代码：
{t('Welcome'）}，{t（'User'）}！

赞(0）回复(0）举报 2023-04-10