react i18n国际化

时间:2021-08-05作者:klpeng分类:JS/Shell浏览:139评论:0

1.引入库

yarn add react-i18next i18next i18next-browser-languagedetector



2.创建配置i8n文件

react i18n国际化
en-us.json

{
  "home": "Home",
  "Language": "Language"}


zh-cn.json

{
  "home": "首页",
  "Language": "语言",}


在src目录下创建i18n.js

import LanguageDetector from 'i18next-browser-languagedetector';
import i18n from "i18next";
import i18next from 'i18next'
import enUsTrans from "../public/locales/en-us.json";
import zhCnTrans from "../public/locales/zh-cn.json";
import {
  initReactI18next
} from 'react-i18next';
import store from './utils/store'

i18n.use(LanguageDetector) //嗅探当前浏览器语言
  .use(initReactI18next) //init i18next
  .init({
    //引入资源文件
    resources: {
      en: {
        translation: enUsTrans,
      },
      zh: {
        translation: zhCnTrans,
      },
    },
    //选择默认语言,选择内容为上述配置中的key,即en/zh
    fallbackLng: "en",
    debug: false,
    interpolation: {
      escapeValue: false, // not needed for react as it escapes by default
    },
  })
const language = store.get('i18nextLng') || 'zh-CN'
i18next.changeLanguage(language)


export default i18next;


在app.js导入

import './i18n'



3.使用方法

import React, { Component, useState } from 'react'
import { useTranslation } from 'react-i18next'
import i18n from '../../i18n'
export default function Title() {
  const { t } = useTranslation()
  let [Languagestate, setCount] = useState(false);
  const changeLanguage = (Languagestate) => {
    if (Languagestate) {
      i18n.changeLanguage("zh")
    } else {
      i18n.changeLanguage('en')
    }
    setCount(Languagestate => !Languagestate)
  }
  
  return (
	  <div>
	  		<p>
	  		{t('home')}
	  		</p>
	  		 <button onClick={() => { changeLanguage(Languagestate) }}>
	                  <div>{t('Language')}</Languagebox>
	         </button>
	  </div> 
)
  
}
打赏
文章版权声明:除非注明,否则均为彭超的博客原创文章,转载或复制请以超链接形式并注明出处。
相关推荐

发表评论:

◎欢迎参与讨论,请在这里发表您的看法、交流您的观点。

猜你喜欢