| 
简介react-i18next 是基于 i18next 的一款强大的国际化框架，可以用于 react 和 react-native 应用，是目前非常主流的国际化解决方案。 i18next 有着以下优点：
- 基于i18next不仅限于react，学一次就可以用在其它地方
- 提供多种组件在hoc、hook和class的情况下进行国际化操作
- 适合服务端的渲染
- 历史悠久，始于2011年比大多数的前端框架都要年长
- 因为历史悠久所以更成熟，目前还没有i18next解决不了的国际化问题
- 有许多插件的支持，比如可以用插件检测当前系统的语言环境，从服务器或者文件系统加载翻译资源
安装需要同时安装 i18next 和 react-i18next 依赖： npm install react-i18next i18next --save
或
yarn add react-i18next i18next --save
配置 在src下新建i18n文件夹，以存放国际化相关配置 i18n中分别新建三个文件：
config.ts：对 i18n 进行初始化操作及插件配置en.json：英文语言配置文件zh.json：中文语言配置文件
en.json { "header": { "register":"Register", "signin":"Sign In", "home": "Home" }, "footer": { "detail" : "All rights reserved @ React" }, "home": { "hot_recommended": "Hot Recommended", "new_arrival": "New arrival", "joint_venture": "Joint Venture" }}zh.json { "header": { "register":"注册", "signin":"登陆", "home": "首页" }, "footer": { "detail" : "版权所有 @ React" }, "home": { "hot_recommended": "爆款推荐", "new_arrival": "新品上市", "joint_venture": "合作企业" }}config.ts import i18n from 'i18next';import { initReactI18next } from 'react-i18next';import translation_en from './en.json';import translation_zh from './zh.json';const resources = { en: { translation: translation_en, }, zh: { translation: translation_zh, },};i18n.use(initReactI18next).init({ resources, lng: 'zh', interpolation: { escapeValue: false, },});export default i18n;使用引用配置文件 在index.tsx中引用i18n的配置文件 ：import './i18n/config'; import React from 'react';import ReactDOM from 'react-dom';import './index.css';import App from './App';import './i18n/config'; // 引用配置文件ReactDOM.render( <React.StrictMode> <App /> </React.StrictMode>, document.getElementById('root'));在组件中使用方法一 在 类组件 中使用withTranslation 高阶函数(HOC) 来完成语言配置的数据注入 import React from 'react';import styles from './Home.module.css';// 引入HOC高阶函数withTranslation 和 i18n的ts类型定义WithTranslation import { withTranslation, WithTranslation } from "react-i18next"class HomeComponent extends React.Component<WithTranslation> { render() { const { t } = this.props; return <> <h1>{t('header.home')}</h1> <ul> <li>{t('home.hot_recommended')}</li> <li>{t('home.new_arrival')}</li> <li>{t('home.joint_venture')}</li> </ul> </> }}export const Home = withTranslation()(HomeComponent); // 使用withTranslation高阶函数来完成语言配置的数据注入方法二 在 函数式组件 中使用useTranslation 的 hook 来处理国际化 import React from 'react';import { useTranslation, Trans } from 'react-i18next'export const Home: React.FC = () => { const { t } = useTranslation() return ( <div> <h1>{t('header.home')}</h1> <ul> <li>{t('home.hot_recommended')}</li> {/* 还有一种方式 */} <li><Trans>home.new_arrival</Trans></li> </ul> </div> );};切换语言 import i18n from 'i18next';const changeLanguage= (val) => { i18n.changeLanguage(val); // val入参值为'en'或'zh'};或 import React from 'react';import { useTranslation } from 'react-i18next'export const Home: React.FC = () => { const { t, i18n } = useTranslation() return ( <button onClick={()=>i18n.changeLanguage(i18n.language=='en'?'zh':'en')}>{i18n.language=='en'?'zh':'en'}</button> );};到此这篇关于React国际化react-i18next的文章就介绍到这了,更多相关React国际化react-i18next内容请搜索51zixue.net以前的文章或继续浏览下面的相关文章希望大家以后多多支持51zixue.net！
下载地址:
elementui中的el-cascader级联选择器的实践
Vue 实现穿梭框功能的详细代码 |
