リアクションのi18nextの翻訳ファイルのHTMLタグ

Question

私はプロジェクトでi18nextを使用しています。翻訳ファイルのhtmlタグを含めて正しくレンダリングすることはできません。

私.json翻訳ファイルの例：

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

ありexcellent answer to this questionですが、jQueryのに関係します。私は私のプロジェクトが反応し、ここで私が持っている設定であり、jQueryのを使用していないよ：

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 

よりks

Answer 1

react-i18nextの問題ではありません。反応要素にhtmlを追加することはできません。 XSSの脆弱性からあなたを安全に意志を反応させ、コンテンツの脱出：

詳細と可能な解決策：https://facebook.github.io/react/tips/dangerously-set-inner-html.html

をしかし、あなたはそこにいないあなたが攻撃をXSSためにあなたのサイトを開いて脱出し、ユーザーコンテンツを置く場合は注意してください。反応-i18nextのreadme読ん

より安全：あなたの分割コンテンツを作る https://github.com/i18next/react-i18next#interpolate-component

を

ので、「最高の」ソリューション - 少なくとも、私たちは何をすべきか - 翻訳に値下げを使用し、使用している例：https://github.com/acdlite/react-remarkableを使用して、フォーマットされたコンテンツに変換します。