i18next国际化(react)

本文主要是介绍i18next国际化(react)，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！

 i18next官网库（https://react.i18next.com/）

安装命令  npm install react-i18next i18next --save
 

includes/i18n.js

import i18n from "i18next";
import { initReactI18next } from "react-i18next";
import zh from '../locales/zh.json';
import en from '../locales/en.json';const resources = {//对应的英文en,//对应的中文zh, 
};i18n.use(initReactI18next) .init({resources,// 默认语言改为中文lng: "zh", //这个是一个中文切换到因英文如果切换错误会默认切换到中文fallbackLng: "zh",interpolation: {escapeValue: false }});export default i18n;

locales/en.json

{"translation": {"Welcome to React": "Welcome to React ","Learn React" : "Learn React"}}

zh.jaon

{"translation": {"Welcome to React": "欢迎使用 React","Learn React" : "学习 React"}
}

app.js

import React,{useRef} from 'react'
import "./includes/i18n"
import { useTranslation } from 'react-i18next';
import {requestMsgApi} from "./api/message"export default function App() {//获取当前组件实例const componentRef = useRef(null);// 在需要的地方获取组件实例const instance = componentRef.current;//就可以简单地插入我们的文本const { t, i18n } = useTranslation();//设置语言切换const changeLangage =()=>{//通过调用这个i18nchangeLanguage这样一个方法就可以简单的修改我们当前的语言i18n.changeLanguage(i18n.language === "en" ? "zh" : "en");}return (<div className='App'><header className='App-header'><h1>{t('Welcome to React')}</h1><p>{t('Learn React')}</p>{/* i18n.language 可查看所在中文还是英文 */}{/* changeLangage 绑定点击事件 */}<button onClick={changeLangage}>{i18n.language}</button></header></div>)
}

这篇关于i18next国际化(react)的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！

---