React中i18next转换文件中的HTML标记 [英] HTML tags in i18next translation files in React

问题描述

我在项目中使用 i18next ，无法解决在翻译文件中包含html标记的问题，正确渲染它们.

我的.json翻译文件的示例:

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

对此问题有很好的答案，但与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);

在组件中，我有:

import t from 'i18n';

t('product.header')

我想要的HTML

Welcome, <strong>User!</strong>

我得到的HTML:

Welcome, <strong>User!</strong&gt

谢谢

解决方案

不是react-i18next的问题-您无法将html添加到react元素中. react将使您免受xss漏洞的侵扰并逃脱内容:

更多详细信息和可能的解决方案: https://facebook. github.io/react/tips/dangerously-set-inner-html.html

但是请注意，如果您没有将用户内容放在那儿，则您会打开站点进行xss攻击.

更安全地阅读react-i18next自述文件: https://github.com/i18next/react-i18next#interpolate-component

这使您可以分割内容

因此，最佳"解决方案-至少是我们所做的-在翻译中使用markdown并使用例如: https://github.com/acdlite/react-remarkable 即可将其转换为格式化的内容.

I'm using i18next in a project and can't get around including html tags in translation files and having them properly rendered.

An example of my .json translation file:

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

There is an excellent answer to this question, but relating to JQuery. I'm not using JQuery, my project is React and here is the setup that I have:

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

In component I have:

import t from 'i18n';

t('product.header')

Html that I want:

Welcome, <strong>User!</strong>

Html I'm getting:

Welcome, <strong>User!</strong&gt

Thanks

解决方案

not a problem of react-i18next - you just can't add html into a react element. react will safe you from xss vulnerability and escape the content:

more detail and possible solution: https://facebook.github.io/react/tips/dangerously-set-inner-html.html

but be aware if you put user content there not escaped you open your site to xss attacks.

more secure reading the react-i18next readme: https://github.com/i18next/react-i18next#interpolate-component

which makes you split content

so the "best" solution - at least what we do - is using markdown in the translations and use eg: https://github.com/acdlite/react-remarkable to convert that to formatted content.

这篇关于React中i18next转换文件中的HTML标记的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！