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

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

我已经按照简易指南把整个事情安排好了。 但是没有关于如何手动更改语言的内容。 正如您所见，有一个函数可以改变语言，但它位于函数组件内部：

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

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

  return ([...])
}

但是，my component是从component扩展而来的类，它的工作方式似乎不同：

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

---

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

它抛出了一些我还没有解决的错误，但至少它可以工作。 显然，在函数组件（如前面列出的组件）中使用UseTransformation时，t和i18n变量是通过调用UseTransformation（）获得的。 但是，当使用类时，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);

import React，{Component}来自“React”；
从'react-i18next'导入{withTranslation}；
类概要文件扩展了组件{
render（）{
const{t，i18n}=this.props；
常量changeLanguage=lng=>{
i18n.变更语言（lng）；
};
返回(
[...]
changeLanguage（'en'）}>en
[...]
)
}
使用translation（）导出默认值（UserProfile）；

当我解决警告时，我会编辑答案，但我会在这里使用此解决方案，以防有人有相同的问题

我得到的错误如下：

未捕获错误：MobX提供程序：提供的存储集已更改。 见：

---

它抛出了一些我还没有解决的错误，但至少它是有效的。 显然，在函数组件（如前面列出的组件）中使用UseTransformation时，t和i18n变量是通过调用UseTransformation（）获得的。 但是，当使用类时，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);

import React，{Component}来自“React”；
从'react-i18next'导入{withTranslation}；
类概要文件扩展了组件{
render（）{
const{t，i18n}=this.props；
常量changeLanguage=lng=>{
i18n.变更语言（lng）；
};
返回(
[...]
changeLanguage（'en'）}>en
[...]
)
}
使用translation（）导出默认值（UserProfile）；

当我解决警告时，我会编辑答案，但我会在这里使用此解决方案，以防有人有相同的问题

我得到的错误如下：

未捕获错误：MobX提供程序：提供的存储集已更改。 见：