Как изменить язык с i18next в React - PullRequest
Новая
       35

Как изменить язык с i18next в React

0 голосов
/ 31 марта 2020

Я пытаюсь добавить систему перевода i18next в свое приложение React, и я уже все настроил, но, похоже, не могу найти способ изменить язык (например, с помощью клавиши выбора или кнопки).

Я следовал этому простому руководству по настройке всего этого. Но нет ничего о том, как вручную изменить язык. И, как вы можете видеть здесь , есть функция для изменения языка, но она находится внутри компонента функции: 

function Page() {
const { t, i18n } = useTranslation();

  const changeLanguage = lng => {
    i18n.changeLanguage(lng);
  };

  return ([...])
}

Однако мой компонент является классом, расширяющимся от компонента, и он похоже, не работает так: 

class Profile extends Component {
  [...]
}
export default withTranslation()(Profile);

Как мне тогда это сделать? Я понятия не имею.

1 Ответ

0 голосов
/ 02 апреля 2020

Выдает некоторые ошибки, которые я еще не решил, но, по крайней мере, работает. По-видимому, когда в компоненте функции (например, указанном выше) при использовании useTranslation переменные t и i18n получаются путем вызова useTranslation (). Однако при использовании класса t и i18n получаются из this.props.

Итак, теперь класс выглядит так: 

import React, { Component } from "react";
import { withTranslation } from 'react-i18next';

class Profile extends Component {

  render() {
    const { t, i18n } = this.props;
    const changeLanguage = lng => {          
      i18n.changeLanguage(lng);
    };

    return (
      [...]
      <button onClick={() => changeLanguage('en')}>EN</button>
      [...]
    )
  }

  export default withTranslation()(UserProfile);

Я отредактирую ответ, когда решу предупреждения, но я оставлю это решение здесь на случай, если у кого-то возникнет та же проблема.

Я получаю следующую ошибку:

Uncaught Error: MobX Provider: The набор предоставленных магазинов изменился. См .: https://github.com/mobxjs/mobx-react#the Ошибка набора предоставленных магазинов изменилась .

...