6

这是我的代码。 

import React, { Suspense } from 'react';
import { useTranslation } from 'react-i18next';

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

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

  return (
    <div className="App">
      <div className="App-header">
        <button onClick={() => changeLanguage('de')}>de</button>
        <button onClick={() => changeLanguage('en')}>en</button>
      </div>
      <div>{t('test')}</div>
    </div>
  );
}

export default function App() {
  return (
    <Suspense fallback={<div>loading...</div>}>
      <Page />
    </Suspense>
  );
}

当我点击de en按钮时。我得到这个错误。TypeError: i18n.changeLanguage 不是函数。如何修复？

4

4 回答 4

14

看起来你还没有配置i18next。

您将需要创建一个i18n.js包含以下内容的文件：

import i18n from 'i18next';
import { initReactI18next } from 'react-i18next';

import Backend from 'i18next-xhr-backend';
import LanguageDetector from 'i18next-browser-languagedetector';


i18n
  .use(Backend)
  .use(LanguageDetector)
  .use(initReactI18next)
  .init({
    fallbackLng: 'en',
    debug: true,

    interpolation: {
      escapeValue: false,
    }
  });
export default i18n;

然后将其导入您的index.js：

import React, { Component } from "react";
import ReactDOM from "react-dom";
import App from './App';

import './i18n';

ReactDOM.render(
  <App />,
  document.getElementById("root")
);

资源

于 2019-10-01T00:53:46.070 回答
3

a) 像上面的代码一样移动 changeLanguage - 但也从 '../i18n' 导入 i18n；或者你定义你的 i18n 实例的地方。

import i18n from 'i18n';

// define the function outside of component scope
const changeLanguage = (lng) => {
  i18n.changeLanguage(lng);
};

b) 或以下步骤：

import React, { Suspense } from 'react';
import { useTranslation } from 'react-i18next';

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

  const toggle = lng => i18n.changeLanguage(lng); 
  if (this.props.event){

   return (
    <div className="App">
      <div className="App-header">
        <button onClick={() => toggle(this.props.event)}>de</button>
        <button onClick={() => toggle(this.props.event)}>en</button>
      </div>
      <div>{t('test')}</div>
    </div>
   );
  }
 }
于 2019-10-01T02:19:42.923 回答
2

我有同样的错误。不幸的是，i18n 文档不是很好。

我们需要创建 i18n提供者(I18nextProvider) 并在调用init函数后传递一个 i18n 对象。当然，我们必须将我们的 App 包装在 I18nextProvider 中

i18n.js

import i18n from 'i18next';
import { initReactI18next } from 'react-i18next';
import en from './en.json';
import de from './de.json';

i18n
  .use(initReactI18next)
  .init({
    resources: {
      en: {
        translation: en,
      },
      de: {
        translation: de,
      },
    },
    fallbackLng: 'en',
    interpolation: {
      escapeValue: false,
    },
  });

export default i18n;

index.js

import React from 'react';
import { useTranslation, I18nextProvider } from 'react-i18next';
import i18n from './i18n';

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

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

  return (
    <div className="App">
      <div className="App-header">
        <button onClick={() => changeLanguage('de')}>de</button>
        <button onClick={() => changeLanguage('en')}>en</button>
      </div>
      <div>{t('test')}</div>
    </div>
  );
}

export default function App() {
  return (
    <I18nextProvider i18n={i18n}>
      <Page />
    </I18nextProvider>
  );
}
于 2021-07-24T11:54:53.737 回答
-1

尝试在您的 onClick 输入事件中使用

() => changeLanguage('en').bind(this)

这可以解决您的问题。

于 2019-10-01T00:50:47.780 回答