i18next react-HTML 태그

미노스

나는 반응 프로젝트의 번역을하고 있으므로 i18next를 사용하고 있습니다.

지금까지는 문제가 없었습니다. 문서에 따라 모든 것이 작동합니다. 조금 더 어려운 주제에 도달했습니다. 제 번역에서 레이아웃에 대한 html 코드 (매우 간단 함)를 갖고 싶습니다.

단,
태그는 텍스트로 표시되고 html에서는 고려되지 않습니다. 이해할 수없는 부분입니다. 문서를 잘 읽으면 다음과 같아야합니다.

해결책이 있습니까?

내 i18n.js 구성은 다음과 같습니다.

import i18n from 'i18next';
import { initReactI18next } from 'react-i18next';

import Backend from 'i18next-http-backend';
import LanguageDetector from 'i18next-browser-languagedetector';

import translation from "./translation.json"
// not like to use this?
// have a look at the Quick start guide 
// for passing in lng and translations on init

const resources = translation

i18n
  .use(Backend)
  .use(LanguageDetector)
  .use(initReactI18next)
  .init({
    resources,
    fallbackLng: 'en',
    debug: true,

    interpolation: {
      escapeValue: false, // not needed for react as it escapes by default
    },
    react:{
      bindI18n: 'languageChanged',
      transSupportBasicHtmlNodes: true,
      transKeepBasicHtmlNodesFor: ['br', 'strong', 'i'],
      useSuspense: false //   <---- this will do the magic
    }
  });


export default i18n;

번역 (테스트입니다!) :

"home_text":"hello <br/> world"

여기에서 번역을 부릅니다.

<p style={{color:'#A1A1A1', fontWeight:'400'}}>
    {t('home_text')}
</p>

아마도 구성을 잘못했지만 어디인지 모르겠습니다 ...

펠릭스 모시

번역에서 html 요소를 렌더링하려면 html 요소와 React 구성 요소를 혼합 및 일치시킬 수있는 Trans 구성 요소 를 사용해야 합니다.

// usage 
<Trans i18nKey="home_text" components={[<br />]} />

// translation.json
{
  "home_text": "hello <1/> world"
}

줄 바꿈에 대한 개인적인 권장 사항 \n은 CSS 조합과 함께 번역 내부를 사용하십시오 .

예를 들어 다음 답변을 확인할 수 있습니다 .JSON String의 React i18n 브레이크 라인

이 기사는 인터넷에서 수집됩니다. 재 인쇄 할 때 출처를 알려주십시오.

침해가 발생한 경우 연락 주시기 바랍니다[email protected] 삭제

에서 수정
0

몇 마디 만하겠습니다

0리뷰
로그인참여 후 검토

관련 기사

분류에서Dev

HTML 태그 <center> </ center>

분류에서Dev

로컬 및 프로덕션 환경에서 다른 React i18next Backend-Path

분류에서Dev

React 및 TypeScript에서 HTML <a> 태그 요소 확장

분류에서Dev

React에서 i18next 번역이 키를 찾을 수 없음

분류에서Dev

HTML 태그를 기반으로 i18next 언어 설정

분류에서Dev

html 태그가 React Component의 배열에서 오는 경우 문자열 대신 html 태그로 렌더링하는 방법은 무엇입니까?

분류에서Dev

React에서 i18next를 설정하는 데 내가 뭘 잘못하고 있습니까? "i18next :: translator : missingKey"오류 발생

분류에서Dev

HTML BR 태그 제어

분류에서Dev

React와 Redux : HTML 태그로 React Map 함수 감싸기

분류에서Dev

React에서 HTML 태그에 대한 임의의 className 생성 문제

분류에서Dev

HTML 스크립트 태그에 React env 변수 삽입

분류에서Dev

Next-i18next / React i18next에서 텍스트의 위치를 변경하는 링크 구성 요소를 어떻게 보간합니까?

분류에서Dev

현재 언어 angularjs 및 i18next

분류에서Dev

MVC @ html.Actionlink는 html i 태그를 포함합니다.

분류에서Dev

HTML의 i18next와 lang 속성의 차이점은 무엇입니까?

분류에서Dev

i18next 즉시 resGetPath 변경

분류에서Dev

i18next 즉시 resGetPath 변경

분류에서Dev

Jquery i18next 번역 문제

분류에서Dev

Rails 태그 안에 HTML 태그 삽입

분류에서Dev

React-select 선택 메뉴 목록 지원 html 태그

분류에서Dev

React에서 dangerouslySetInnerHTML은 html 태그에 대해 작동하지 않습니다.

분류에서Dev

React-SVG 내부의 HTML 태그

분류에서Dev

React에서 문자열 사이의 문자를 HTML 태그로 바꾸기

분류에서Dev

HTML div가 <i> 태그를 감싸지 않습니다.

분류에서Dev

React에서 html 태그의 값을 어떻게 얻을 수 있습니까?

분류에서Dev

주소 태그의 HTML 기타 태그

분류에서Dev

@ Html.ActionLink에서 i 태그 사용

분류에서Dev

React-HTML 태그가 포함 된 ES6 템플릿 문자열

분류에서Dev

Struts2 태그의 HTML 태그

Related 관련 기사

  1. 1

    HTML 태그 <center> </ center>

  2. 2

    로컬 및 프로덕션 환경에서 다른 React i18next Backend-Path

  3. 3

    React 및 TypeScript에서 HTML <a> 태그 요소 확장

  4. 4

    React에서 i18next 번역이 키를 찾을 수 없음

  5. 5

    HTML 태그를 기반으로 i18next 언어 설정

  6. 6

    html 태그가 React Component의 배열에서 오는 경우 문자열 대신 html 태그로 렌더링하는 방법은 무엇입니까?

  7. 7

    React에서 i18next를 설정하는 데 내가 뭘 잘못하고 있습니까? "i18next :: translator : missingKey"오류 발생

  8. 8

    HTML BR 태그 제어

  9. 9

    React와 Redux : HTML 태그로 React Map 함수 감싸기

  10. 10

    React에서 HTML 태그에 대한 임의의 className 생성 문제

  11. 11

    HTML 스크립트 태그에 React env 변수 삽입

  12. 12

    Next-i18next / React i18next에서 텍스트의 위치를 변경하는 링크 구성 요소를 어떻게 보간합니까?

  13. 13

    현재 언어 angularjs 및 i18next

  14. 14

    MVC @ html.Actionlink는 html i 태그를 포함합니다.

  15. 15

    HTML의 i18next와 lang 속성의 차이점은 무엇입니까?

  16. 16

    i18next 즉시 resGetPath 변경

  17. 17

    i18next 즉시 resGetPath 변경

  18. 18

    Jquery i18next 번역 문제

  19. 19

    Rails 태그 안에 HTML 태그 삽입

  20. 20

    React-select 선택 메뉴 목록 지원 html 태그

  21. 21

    React에서 dangerouslySetInnerHTML은 html 태그에 대해 작동하지 않습니다.

  22. 22

    React-SVG 내부의 HTML 태그

  23. 23

    React에서 문자열 사이의 문자를 HTML 태그로 바꾸기

  24. 24

    HTML div가 <i> 태그를 감싸지 않습니다.

  25. 25

    React에서 html 태그의 값을 어떻게 얻을 수 있습니까?

  26. 26

    주소 태그의 HTML 기타 태그

  27. 27

    @ Html.ActionLink에서 i 태그 사용

  28. 28

    React-HTML 태그가 포함 된 ES6 템플릿 문자열

  29. 29

    Struts2 태그의 HTML 태그

뜨겁다태그

보관