如何在 React 中设置 i18n 默认翻译语言

Question

我的应用程序中有两个使用 i18n 翻译器的翻译，但我尝试设置默认语言但没有成功。

首选语言（默认语言）将在注册时设置，并且来自数据库。

我在哪里可以创建某种逻辑来告诉 i18n 来自后端的语言是什么？

该值将显示如下：

const defaultLang = currentUser.data.laiso //this will output a string eg. 'en'

i18n 配置文件看起来像这样：

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

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

const Languages = ['en', 'de'];

i18n

  .use(Backend)

  .use(LanguageDetector)

  .use(initReactI18next)

  .init({
    fallbackLng: 'en',
    debug: true,
    whitelist: Languages,

    interpolation: {
      escapeValue: false
    }
  });


export default i18n;

下面应该写什么.use(Backend)？这是第一次使用 i18n，所以任何提示将不胜感激。

这是我需要翻译的组件。在其中，我尝试根据首选语言设置索引i18n.languages，但这不起作用：

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


export default function Dashboard() {
    //the logged user
    const currentUser = AuthService.getCurrentUser();
    //value from database
    const defaultLang = currentUser.data.laiso //this will output a string eg. 'en'

    //translation
    const { t, i18n } = useTranslation();

    function handleClick(lang) {
        i18n.changeLanguage(lang);
    }

    const current = i18n.languages[defaultLang === 'en' ? 0 : 1]


    return (
        <>
        <div className={styles.languageSelector}>
        <a 
          onClick={ () => handleClick('en') }
          style={{ fontWeight: current === "en" ? 800 : 400}}
        >
          EN
        </a>
        <a 
          onClick={ () => handleClick('de') }
          style={{ fontWeight: current === "de" ? 800 : 400}}
        >    
          DE
        </a>
      </div>
      <div>{t('translated.stuff')}</div>
      </>
    )
}

Answer 1

你只需lng: 'en'在 .init() 中添加即可做到这一点

.init({
    fallbackLng: 'en',
    lng: 'en', // default language
    debug: true,
    whitelist: Languages,
    interpolation: {
        escapeValue: false
    }
});

https://www.i18next.com/overview/configuration-options

Answer 2

我认为您需要一个钩子来在语言更改时重新呈现页面。所以你可以将其添加到你的Dashboard.jsx中：

  React.useEffect(() => {
    const handleLanguageChange = () => {
      // Refresh your component, maybe use a hook for it.
    };

    i18next.on("languageChanged", handleLanguageChange);

    return () => {
      i18next.off("languageChanged", handleLanguageChange);
    };
  }, []);

对于刷新逻辑，您可以添加一个计数器，该计数器在语言更改时递增，这应该足以启动组件的重新渲染。