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 추가 정보 읽기

더 안전한 : 당신에게 분할 컨텐츠를 만드는 https://github.com/i18next/react-i18next#interpolate-component

을

그래서 "최고"솔루션 - 적어도 우리가하는 일 - 번역에 가격 인하를 사용하여 사용되는 예 : https://github.com/acdlite/react-remarkable을 사용하여 형식이 지정된 콘텐츠로 변환하십시오.