React项目之react-i18next插件实现多语言国际化

npm install react-i18next i18next --save

{
  "home":{
    "title":"首页",
    "content":"我是首页",
  },
  "about":{
    "title":"关于我们",
    "content":"我是关于我们"
  }
}

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

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

复制代码这样的话react-i18next和i18next 就可以作用到App组件以及它的所有子组件上了。

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

<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>

const [language,setLanguage] = useState('zh-CN')

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

detection: {
    caches: ['localStorage', 'sessionStorage', 'cookie'],
}

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

import {Translation} from 'react-i18next'

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

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)