如何在 react-i18next 中更改语言

Question

首先我初始化i18next实例

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

const resources = {
  en: {
    translation: {
      'Welcome to React': 'Welcome to React and react'
    }
  },
  de: {
    translation: {
      'Welcome to React': 'Bienvenue à React et react-i18next'
    }
  }
};

i18n.use(initReactI18next).init({
  resources,
  lng: 'de',

  interpolation: {
    escapeValue: false
  }
});

export default i18n;

然后我在我的组件中使用带有 useTranslation 挂钩的实例

import React from 'react'
import { useTranslation } from 'react-i18next'

import classes from './intro.module.scss'

export default function Intro() {
    const { t, i18n } = useTranslation()
    return (
        <div className={classes.container}>
            <div className={classes.innerContainer}>
            <h1>{t('Welcome to React')}</h1>
            </div>
        </div>
    )
}

那么现在如何将语言从我在 i18n 实例

中初始化的默认语言更改为 de

我的导航栏上有一个按钮，我希望当我单击该按钮时，语言应该切换。

Answer 1

你可以在 react-i18n 的文档中找到你需要的所有信息： https://react.i18next.com/legacy-v9/step-by-step-guide#d-let-the-user-toggle-the-language

您需要使用函数 i18n.changeLanguage() 并将所需的语言作为 props 传递。

Answer 2

试试这个，在函数内部传递语言来调用不同的语言。

import React from 'react'
import { useTranslation } from 'react-i18next'

import classes from './intro.module.scss'

export default function Intro() {
    const { t, i18n } = useTranslation()

     const changeLanguageHandler = (lang) =>
     {
       i18n.changeLanguage("de")
     }



    return (
        <div className={classes.container}>
            <div className={classes.innerContainer}>
            <h1>{t('Welcome to React')}</h1>
            </div>
        </div>
    )
}

Answer 3

如果有人需要获取当前选择的语言，这就是获取方式

const getLanguage = () => i18next.language || window.localStorage.i18nextLng

如何在 react-i18next 中更改语言

how do I change language in react-i18next

internationalization

reactjs