Вручную запустить цикл обновления Lingui.js после i18n.active('xx') вне реакции

Я создаю переключатель языка, который вызывает i18n.activate для изменения текущего языка. Активный язык меняется, но уже отображаемые тексты не обновляются с новым переводом.

Перед этим подходом я возился с wrapI18n и I18n, но обнаружил, что работать с кодом напрямую не помогает. Похоже, они предназначены для непосредственного использования в методе render().

Я импортирую i18n из index.js, где я инициировал его в ванильном JavaScript, предоставил его i18nProvider для React и экспортировал для прямого доступа в коде:

index.js

// I18n
import { setupI18n } from "@lingui/core"
import { I18nProvider } from '@lingui/react'
import catalogDe from './locales/de/messages.js'
import catalogEn from './locales/en/messages.js'

export const i18n = setupI18n({
  language: 'de',
  catalogs: {
    'de': catalogDe,
    'en': catalogEn
  }
});

ReactDOM.render((
  <I18nProvider i18n={i18n} >
...
</I18nProvider>
), document.getElementById('root'));

Header.jsx

import { i18n } from "../index"
import { t } from "@lingui/macro"

export default class Header extends React.Component {
...
    changeLanguageToEn() {
        console.log(i18n.language);
        i18n.activate('en');
        console.log(i18n.language);
    }

render() {
...
<a className="header__nav-link" onClick={this.changeLanguageToEn} ><Trans id='NAV_LANG_ENGLISH' /></a>
...
}

Я вижу в журналах, что язык меняется и новые сообщения переводятся, но цикл обновления не запускается, и все отображаемые не обновляются с новым переводом.

Как я могу запустить это вручную? Или переподключить React / I1nProvider, чтобы его поймать?

0 ответов

Другие вопросы по тегам