react使用i18next实现国际化

一、安装所需依赖

需要两个依赖
react-i18next
i18next

npm i react-i18next i18next -S

 

二、配置i18n文件

• i18n.js 主要配置文件
• *.json语言文件
  

zh_cn.json

{
    "Simplified Chinese": "中文",
    "English": "英文",
    "Traditional Chinese": "繁体",
    "Language": "语言"
}

i18n.js

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

import zhCn from './zh_cn.json';
import en from './en.json';
import zhTw from './zh_tw.json';

// 此处决定采用sessionStorage来记录当前语言版本
const changeLange = () => {
  const lang = sessionStorage.getItem('lang');

  if(!lang){
    sessionStorage.setItem('lang', 'en')
    return 'en';
  }

   return lang;
}

const resources = {
    en: {
        translation: en,
    },
    zh_cn: {
        translation: zhCn,
    },
    zh_tw: {
        translation: zhTw,
    }
};

i18n.use(initReactI18next).init({
    resources,
    lng: changeLange(),
    interpolation: {
        escapeValue: false,
    },
});

export default i18n;

 

三、在根文件index.js中引入i18n

import React from 'react';
import ReactDOM from 'react-dom';

import App from './App';

import './i18n/i18n';


// 因使用antd部分组件功能因为严格模式开启会报错
ReactDOM.render(
  // <React.StrictMode>
  <App />,
  // </React.StrictMode>,
  document.getElementById('root')
);

 

四、使用

使用t包裹去匹配对应翻译
使用i18n .changeLanguage去切换语言

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

const Home = () => {
    const { t, i18n } = useTranslation();

    const changeLange = (lang) => {
        i18n.changeLanguage(lang);
        sessionStorage.setItem('lang', lang);
    }

    return (
        <>
            <Text>{t('English')}</Text>
            <button onClick={changeLange('zh_cn')}>中文简体</button>
            <button onClick={changeLange('en')}>英文</button>
        </>
    )
}

 
注：
在配置语言json文件时，如果想在json中分类可使用

{
    "lang": {
		    "Simplified Chinese": "中文",
		    "English": "英文",
		    "Traditional Chinese": "繁体",
		    "Language": "语言"
    	},
    "home": {
    	"help": "帮助"
    	}
}

在使用t去匹配时就应改为读取对象属性的方式

	t('lang.English')