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

Question

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

我按照这个简单的指南来设置整个过程。但没有关于如何手动更改语言的信息。而且，正如您在此处看到的，有一个更改语言的函数，但它位于函数组件内：

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);

当我解决警告时，我会编辑答案，但我会将这个解决方案留在这里，以防有人遇到同样的问题。

我得到的错误如下：

未捕获的错误：MobX 提供商：提供的商店集已更改。请参阅： https: //github.com/mobxjs/mobx-react#the-set-of-provided-stores-has-changed-error。