0
点赞
收藏
分享

微信扫一扫

React国际化react-i18next


React国际化react-i18next_i18n

简介

​​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​​:中文语言配置文件
  • React国际化react-i18next_React国际化_02

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>
);
};


举报

相关推荐

0 条评论