i18next react - HTML теги - PullRequest
Новая
       51

i18next react - HTML теги

0 голосов
/ 19 июня 2020

Я делаю перевод проекта React, поэтому использую i18next.

Пока у меня не было никаких проблем, после do c все работает, только перехожу к более сложной теме, я бы хотел иметь код html (очень простой ) в моем переводе, для макета.

Только теги отображаются в виде текста и не учитываются в html, чего-то я не понимаю, если я прочитал do c ну, они должны быть ...

У вас есть решение ?

Вот мой i18n. js config: 

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>

Я, наверное, неправильно настроил, но не вижу где ...

1 Ответ

1 голос
/ 20 июня 2020

Для рендеринга html элементов из переводов вам нужно будет использовать Trans-компонент , который позволяет вам смешивать и сопоставлять html элементы и компоненты React. 

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

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

Персональная рекомендация, для разрыва строки используйте \n внутри своих переводов с комбинацией css.

Для примера вы можете проверить этот ответ: Реагировать на разрыв строки i18n в JSON Строка

...