javascript - 如何在 React 中使用 i18next 更改语言

Question

我正在尝试将 i18next 翻译系统添加到我的 React 应用程序中，并且我已经配置了所有内容，但我似乎无法找到更改语言的方法(例如，使用选择或按钮)。

我关注了this设置整个过程的简单指南。但是没有关于如何手动更改语言的内容。而且，如您所见here ，有一个更改语言的功能，但它在功能组件内部:

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

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

  return ([...])
}

但是，我的组件是一个从组件扩展的类，它的工作方式似乎不同:

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

那我该怎么办呢？我不知道。

Answer 1

它会抛出一些我还没有解决的错误，但至少它是有效的。显然，在函数组件中(例如前面列出的那个)，当使用 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 set of provided stores has changed. See: https://github.com/mobxjs/mobx-react#the-set-of-provided-stores-has-changed-error.