关于前端:React项目多语言国际化reacti18next插件实现本地数据篇

如何了解多语言国际化？

图片中下拉局部曾经分明的阐明了多语言国际化是什么了。

集体了解：它就是咱们在网站上能够通过切换语言类型来实现同一性能的不同语言展现成果。

react-i18next 介绍

react-i18next 是一个弱小的 React / React Native 国际化框架，它基于 i18next 的 React 插件。

装置依赖

 npm install react-i18next i18next --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 文件

import i18n from "i18next";
import {initReactI18next} from "react-i18next";
//i18next-browser-languagedetector 插件 
// 这是一个 i18next 语言检测插件，用于检测浏览器中的用户语言，// 详情请拜访：https://github.com/i18next/i18next-browser-languageDetector
import LanguageDetector from 'i18next-browser-languagedetector';
// 引入须要实现国际化的简体、繁体、英文三种数据的 json 文件
import cn from './locales/zh-cn.json'
import hk from './locales/zh-HK.json'
import en from './locales/en-us.json'
const resources = {
  cn: {translation: cn},
  hk: {translation: hk},
  en: {translation: en},
};
i18n.use(LanguageDetector) // 嗅探以后浏览器语言 zh-CN
.use(initReactI18next) // 将 i18n 向下传递给 react-i18next
  .init({ // 初始化
    resources, // 本地多语言数据
    fallbackLng: "cn", // 默认以后环境的语言
    detection: {caches: ['localStorage', 'sessionStorage', 'cookie'],
    }
  })

export default i18n

3. 而后将 react-i18next-config.js 引入到 App.js 组件

import i18n from './react-i18next-config'

 这样的话 react-i18next 和 i18next 就能够作用到 App 组件以及它的所有子组件上了。

4. 默认语言和默认数据

 我的项目初始化后，用户浏览器的默认语言为 zh-CN
 依据 react-i18next-config.js 文件中对于 resources 的配置：

"zh-CN": {translation: './locales/zh-cn.json'},
  "zh-HK": {translation: './locales/zh-HK.json'},
  "en-US": {translation: './locales/en-us.json'},

 根据上述配置咱们能够判断出默认申请的数据为./locales/zh-cn.json

5. 开发抉择切换语言组件

<div>
     <label> 语言切换 </label>
     <select value={language} onChange={(e)=>changeLanguage(e)}>
        <option value="zh-CN"> 简 </option>
        <option value="zh-HK"> 繁 </option>
        <option value="en-US"> 英 </option>
     </select>
 </div>  

 当咱们进行语言切换时，将调用组件中的 changeLanguage 办法。这个办法的调用会做上面几件事：1、对以后抉择的语言类型进行更新操作 

  const [language,setLanguage] = useState('zh-CN')
  
  setLanguage(以后选中的语言类型)，更新页面中选中的语言类型对应的文字
  
2. 执行由 react-i18next-config.js 导出的 i18n 下面的 changeLanguage
  (以后选中的语言类型) 办法。执行了 i18n.changeLanguage 后：a. 更新数据源
  
    "zh-CN": {translation: './locales/zh-cn.json'},
      "zh-HK": {translation: './locales/zh-HK.json'},
      "en-US": {translation: './locales/en-us.json'},
    依据选中的语言类型去获取对应的 json 数据
    
  b. 更新语言类型
  
    localStorage 中 i18nextLng 的值
   

6. i18next-browser-languagedetector 插件引入

   装置 i18next-browser-languagedetector 插件后，能够探测出以后浏览器的用户语言为 zh-CN。此时会在 localStorage 中设置 i18nextLng 为 zh-CN。那么这里为什么会在 localStorage 中存储呢？键值为什么是 i18nextLng 呢?

上述代码就是 i18next-browser-languagedetector 插件的源码，咱们能够分明的看到是插件默认将浏览器的用户语言（zh-CN）存储到 localStorage 中去的，并设置键名为 i18nextLng

自定义配置

 如果咱们须要自定义的话 能够通过官网文档中的 Detector Options 进行配置, 例如：初始化我的项目后，咱们不仅心愿 localStorage 中存储了 i18nextLng，同时心愿在 sessionStorage、cookie 中也存储 i18nextLng。能够进行如下配置：detection: {caches: ['localStorage', 'sessionStorage', 'cookie'],
}

将上述配置放到 i18n 初始化 init 的配置对象中去就能够了。

localStorage 存储 i18nextLng 的作用

 家喻户晓，localStorage 是不会随着页面刷新、标签敞开造成数据失落的，也就是说当咱们刷新页面时，咱们依然能够拿到上一次用户抉择的语言类型，并且依照这个语言类型去加载对应的 json 文件数据。

更多配置，请拜访 i18next-browser-languageDetector 官网文档：
https://github.com/i18next/i1…

如何应用 react-i18next 进行渲染，进而实现页面多语言切换呢？

1. useTranslation (hook)

留神：useTranslation() 必须是函数组件中应用否则会报，hooks 谬误。

 const {t} = useTranslation()
 <NavLink to="/home">{t('home.title')}</NavLink>

2. Translation (render prop)

import {Translation} from 'react-i18next'

<Translation>
  {(t) => <h3>{t("about.content")}</h3>}
</Translation>

3. withTranslation (HOC) 高阶组件形式

react-i18next 外部封装了一个高阶组件 withTranslation,
咱们须要利用这个高阶组件把咱们本人的组件包装一次

import {withTranslation} from 'react-i18next'; 
// 类组件
class Home extends Component {render() {const {t} = this.props

    return (
      <div>
          <h3>{t("home.content")}</h3>
      </div>
    )
  }
}
// 函数组件
const Home = ({t})=>{
  return (
    <div>
        <h3>{t("home.content")}</h3>
    </div>
  )
}
// 组件导出：export default withTranslation()(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 有那些须要补充的也能够进行评论，作者不胜感激。排版码字不易，感觉对您有所帮忙，就帮忙点个赞吧！