react i18n 实现多语言

react i18n 实现多语言

1. 安装依赖

npm install i18next react-i18next //需要安装两个这两个库

2. 安装完成后 首先 你可以在你的common文件夹下新建一个i18n的文件夹用来存放你多语言相关的文件
   
3. 先定义一个多语言的配置文件 我命名的是language.js

export const languages = { 
	zh: {
		hello: '你好 世界'
	},
	en: {
		hello: 'hello world'
	}
	// 一个是对应的中文的语言 一个对应的英文 hello的key就相当与一个映射
}

4. 然后定义一个i18next.js文件 用来初始化多语言

import i18n from 'i18next'; 
import { initReactI18next } from 'react-i18next';
import { languages } from './language.js'; //先引入多语言配置函数
const defaultLanguage = 'en'; //默认英语

i18n
  .use(initReactI18next) //使用
  .init({ //初始化
    resources: languages,
    lng: defaultLanguage,
    fallbackLng: defaultLanguage,
    interpolation: {
      escapeValue: false,
    },
  })
  .then(t => {
    console.log('18n ready');
  });

const changeLanguage = lng => { //定义多语言的change 
  i18n.changeLanguage(lng); //i18n会通过这个方法去改变它的语言
};

export { changeLanguage }; //导出

5. 在页面中的使用

import React, {useEffect} from 'react'
import { changeLanguage } from './common/i18n/i18next.js';
import { useTranslation } from 'react-i18next';
export　default function Text(){
	//而这个changeLanguage方法 是用来修改你的多语言的 如果你的语言假设从接口获取的
	useEffect(() => {
		//就可以在useEffect内等接口执行完成后调用这个方法替换语言了 当然 你也可以在最初始化的状态去定义 可能有些并不是在useEffect初始化的
		changeLanguage(res.lang)
	}, [])
	const { t } = useTranslation(); //把使用方法结构
	return <div>{t('hello')}</div> //这里的hello 对应的就是多语言配置文件内的映射的key 
	//打印出来的结果如下所示
}

6. 当然 有时候一些数据可能是从后台获取来的 然后后台返回的并没有多语言 这个时候我们也可以定一个方法去映射 当然 这个前提是你知道他返回的文字是什么 也需要先定义好 我定义了一个setLangMap.js文件

export const setLangMap = {
	'only': 'hello' //定义一个唯一的key 然后 这个key的话 可以设成任何 只要你接口返回的里面 对应你需要的值内 有这个唯一的key 你就可以用这个key 进行映射成展示的
}

import React, {useEffect} from 'react'
import { setLangMap } from './common/i18n/setLangMap.js'; //引入映射文件
import { changeLanguage } from './common/i18n/i18next.js';
import { useTranslation } from 'react-i18next';
export　default function Text(){
	useEffect(() => {
		changeLanguage(res.lang)
	}, [])
	const { t } = useTranslation(); 
	return <div>{t(setLangMap['only'])}</div> //这里使用上对应的映射值 使用结果跟{t('hello')} 一样
	//打印出来的结果如下所示
}

好了 以上就是react i18n 多语言的使用了 希望能帮到你们 有什么不对的地方还希望大佬们见谅