如何理解多语言国际化？图中的下拉部分已经很清楚的解释了什么是多语言国际化。个人理解：我们通过在网站上切换语言类型来实现相同的功能，就是不同的语言显示效果。react-i18next介绍react-i18next是一个基于i18next的React插件的强大的React/ReactNative国际化框架。安装依赖npminstallreact-i18nexti18next--save既然要学习使用react-i18next，为什么还要安装i18next包呢？i18next是提供所有翻译功能的核心，react-i18next提供了一些额外的功能供与react一起使用。项目文件结构项目配置1.本地json数据初始化（新增简体、繁体、英文三个json文件）先看一下zh-cn.json文件的数据结构。繁体和英文结构相同，但内容不同。{"home":{"title":"主页","content":"我是主页",},"about":{"title":"关于我们","content":"我是关于我们"}}2.创建配置react-i18next的react-i18next-config.js文件importi18nfrom"i18next";import{initReactI18next}from"react-i18next";//i18next-browser-languagedetectorplugin//这是一个i18next语言检测插件，用于检测浏览器中的用户语言，//详情请访问：https://github.com/i18next/i18next-browser-languageDetectorimportLanguageDetectorfrom'i18next-browser-languagedetector';//引入需要实现的简体、繁体、英文数据的国际化json文件importcnfrom'./locales/zh-cn.json'importhkfrom'./locales/zh-HK.json'importenfrom'./locales/en-us.json'constresources={cn:{translation:cn},hk:{translation:hk},en:{translation:en},};i18n.use(LanguageDetector)//嗅探电流浏览器语言zh-CN.use(initReactI18next)//将i18n向下传递给react-i18next.init({//初始化资源,//本地多语言数据fallbackLng:"cn",//默认当前环境语言检测:{caches:['localStorage','sessionStorage','cookie'],}})export默认i18n3。然后在App.js组件中引入react-i18next-config.jsimporti18nfrom'./react-i18next-config'这样react-i18next和i18next就可以应用于App组件及其所有子组件4.默认后language和default数据项初始化，用户浏览器默认语言为zh-CN根据react-i18next-config.js文件中资源的配置："zh-CN":{translation:'./locales/zh-cn.json'},"zh-HK":{翻译:'./locales/zh-HK.json'},"en-US":{翻译:'./locales/en-us.json'}，根据上面的配置，我们可以判断默认请求的数据是./locales/zh-cn.json5.开发选择切换语言组件
changeLanguage(e)}>简体繁体English
当我们切换语言时，遇到了changeLanguage组件中的hod将被调用。该方法的调用会做以下事情：1.更新当前选择的语言类型const[language,setLanguage]=useState('zh-CN')setLanguage(当前选择的语言类型)，在更新页面选择2.执行由react-i18next-config.js导出的i18n上的changeLanguage（当前选择的语言类型）方法。执行i18n.changeLanguage后：更新数据源"zh-CN":{translation:'./locales/zh-cn.json'},"zh-HK":{translation:'./locales/zh-HK.json'},"en-US":{translation:'./locales/en-us.json'}，根据选择的语言类型获取对应的json数据b.更新语言类型localStorage6中i18nextLng的值。i18next-browser-languagedetector插件介绍安装i18next-browser-languagedetector插件后，可以检测当前浏览器的用户语言为zh-CN。此时i18nextLng会在localStorage中设置为zh-CN。那么这里为什么存储在localStorage中呢？为什么键值是i18nextLng？以上代码为i18next-browser-languagedetector插件的源码。我们可以清楚的看到，该插件默认将浏览器用户语言（zh-CN）存储在localStorage中，并设置了键名自定义配置为i18nextLng，如果我们需要自定义，可以通过官方文档中的DetectorOptions进行配置.比如在初始化项目后，我们不仅希望将i18nextLng存放在localStorage中，还希望将i18nextLng存放在sessionStorage和cookies中。可以进行如下配置：detection:{caches:['localStorage','sessionStorage','cookie'],}将以上配置放入i18n初始化init的配置对象中。localStorage存储i18nextLng的作用众所周知，localStorage不会随着页面刷新和tab关闭造成数据丢失，也就是说我们在刷新页面的时候，仍然可以获取到用户上次选择的语言类型，并且根据以这种语言类型来加载对应的json文件数据。更多配置请访问i18next-browser-languageDetector官方文档：https://github.com/i18next/i1...如何使用react-i18next渲染实现页面多语言切换？useTranslation(hook)注意：useTranslation()必须在函数组件中使用，否则会报hooks错误。const{t}=useTranslation()
{t('home.title')}Translation(renderprop)import{Translation}from'react-i18next'{(t)=>{t("about.content")}
}withTranslation(HOC)高层组件方法react-i18next内部封装了一个高层组件withTranslation，我们需要使用这个高级组件包装我们自己的组件onceimport{withTranslation}from'react-i18next';//classcomponentclassHomeextendsComponent{render(){const{t}=this.propsreturn({t("home.content")}
)}}//函数组件constHome=({t})=>{return({t("home.content")}
)}//组件导出：exportdefaultwithTranslation()(Home)项目实现本文github地址：https://github.com/dabaoRain/...参考文档https://react.i18next.com/https://www.i18next.com/https://github.com/i18next/re...https://github.com/i18next/i1...作者为react-i18next的理解属于基础入门级。对于文章中的理解或使用错误，希望大家不吝指出如果大家对react-i18next有什么意见需要补充，也可以评论。作者很感激排版码字不易。如果觉得对你有帮助，请点个赞！
