「react」让后台走向国际化 i18next

国际化

背景

我使用的是react，采用的是i18next技术。

支持

包含react,vue,angular等语言，具体的，可以查看文档

安装

npm install react-i18next i18next --save
//或者
yarn add react-i18next i18next

使用

• 在index.js相同的路径下，创建一个文件，名为i18n.js，这个文件是react i18的配置文件，这里面的内容为：

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

import {en} from './locals/en-US'
import {cn} from './locals/cn-US'

const resources = {
    en: {
      translation: en
    },
    cn: {
      translation: cn
    }
  };

i18n.use(initReactI18next) 
    .init({
        resources,
        lng: localStorage.language||'cn',
        fallbackLng:'cn',
        interpolation: {
            escapeValue: false, 
        }
    });


export default i18n;

我这里已经将英文与汉语的文字写成独立的文件，如果不写，直接写成一个对象即可。

en-US.js

export const en={
    common:{
        welcome: "Welcome to the product configuration of FOREO",
        language:'language',
        chinese:'chinese',
        english:'english'
    },
    menu:{
        product:'product'
    },
    product:{
        title:'product configuration',
    }
}

• 在index.js中引入

import './i18n'

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

• 在对应的component中使用如下(在hook中应用)

import {useTranslation} from 'react-i18next'

function App(){
    const { t, i18n } = useTranslation();
    
    function changeLanguage(e){//更改语言
        i18n.changeLanguage(e)
    }
    return (
        <Select onChange={changeLanguage} style={{width:120}} defaultValue={localStorage.language}>
          <Option value="cn">{t('common.chinese')}</Option>
          <Option value="en">{t('common.english')}</Option>
        </Select>
    )
}

问题

在实际使用时，我的左菜单是单独一个js文件，所以我遇到的问题是：在js中使用语言切换。

menu.js

import i18n from 'i18n'

const menus = [
  {
    key: 1,
    text: i18n.t('menu.product')
  }
]

i18n.on('languageChanged', (e) => {
  window.location.reload()
});

其中i18n.on函数是重点，如果不加，切换语言时，左侧菜单并不会切换，需要做一个reload。

效果图如下：

还有一个小提示，最好将系统中的选择的语言放在缓存里，我是放在localstorage里，每次reload时，都不会出现语言不对的情况。

由于我的这段代码在项目中运用到，就不单独开一个仓库存放啦，若有需求，请在评论区评论，若人数多，我就开个仓库，感谢观看，谢谢～

(本文完)