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

【问题标题】：How to set i18n default translation language in React如何在 React 中设置 i18n 默认翻译语言
【发布时间】：2021-01-27 14:45:24
【问题描述】：

我的应用中有两个使用 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>
      </>
    )
}

【问题讨论】：

您可能需要实现自定义语言检测器：i18next.com/misc/creating-own-plugins.html#languagedetector

标签： javascript reactjs internationalization

【解决方案1】：

你可以通过在 .init() 中添加 lng: 'en' 来做到这一点

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

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

【讨论】：

【解决方案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);
    };
  }, []);

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

【讨论】：

即使我没有使用 i18next.on(...)，useEffect 的想法也是完美的。谢谢

【解决方案3】：

我已经设法通过使用 useEffect 解决了这个问题。

//set the language from database
  useEffect(() => {
    i18n.changeLanguage(currentUser.data.laiso);
  }, []);

就是这样，谢谢

【讨论】：