当前位置: 首页> 文旅> 文化 > i18next国际化(react)

i18next国际化(react)

时间:2025/7/9 5:55:14来源:https://blog.csdn.net/Wx001214/article/details/139594883 浏览次数:1次


 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)

版权声明:

本网仅为发布的内容提供存储空间,不对发表、转载的内容提供任何形式的保证。凡本网注明“来源:XXX网络”的作品,均转载自其它媒体,著作权归作者所有,商业转载请联系作者获得授权,非商业转载请注明出处。

我们尊重并感谢每一位作者,均已注明文章来源和作者。如因作品内容、版权或其它问题,请及时与我们联系,联系邮箱:809451989@qq.com,投稿邮箱:809451989@qq.com

责任编辑: