Любой совет использовать mobx с i18n (интернационализация) в моем приложении React JS

Question

В моем приложении Mobx + React JS я использую поведение интернационализации. Смотрите следующий пример:

import React, { Component } from 'react'
import {
  InjectedTranslateProps,
  translate
} from 'react-i18next'

import {
  IPropsBase,
  IStateBase
} from './interfaces'

class HomeClass extends Component<IPropsBase & InjectedTranslateProps, IStateBase> {
  render () {
    const { t } = this.props
    return (
      <div>
        {t('common:WELCOME')}
        {t('common:DESCRIPTION')}
      </div>
    )
  }
}

export const Home = translate()(HomeClass)

Я хочу знать, есть ли у вас другой способ сделать это? Заранее спасибо.

Answer 1

Если вы не хотите использовать Provider или HOC, и вам не нужно устанавливать определенные пространства имен для каждого компонента, вы можете использовать mobx, наблюдаемый для рендеринга переключения языка.

Просто создайте наблюдаемый объект, в котором будет храниться ваша функция t, и измените обертку функции changeLanguage, в которой функция t будет переназначена.

Поскольку mobx реагирует на любое наблюдаемое изменение, которое используется в методе рендеринга, это вызовет рендеринг во всех компонентах, которые используют функцию t.

export let i18n = observable({
    t: t
});

export function changeLanguage (lg: string) {
    i18next.changeLanguage(lg);
    this.i18n.t = i18next.getFixedT(lg, i18nCfg.ns);// getFixedT will return new function t
}