简介 react-i18next 是基于 i18next 的一款强大的国际化框架,可以用于 React 和 react-native 应用,是目前非常主流的国际化解决方案。 i18
react-i18next 是基于 i18next
的一款强大的国际化框架,可以用于 React
和 react-native
应用,是目前非常主流的国际化解决方案。
i18next
有着以下优点:
需要同时安装 i18next
和 react-i18next
依赖:
npm install react-i18next i18next --save
或
yarn add react-i18next i18next --save
配置
在src
下新建i18n
文件夹,以存放国际化相关配置
i18n
中分别新建三个文件:
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内容请搜索编程网以前的文章或继续浏览下面的相关文章希望大家以后多多支持编程网!
--结束END--
本文标题: React国际化react-i18next详解
本文链接: https://www.lsjlt.com/news/155189.html(转载时请注明来源链接)
有问题或投稿请发送至: 邮箱/279061341@qq.com QQ/279061341
下载Word文档到电脑,方便收藏和打印~
2024-01-12
2023-05-20
2023-05-20
2023-05-20
2023-05-20
2023-05-20
2023-05-20
2023-05-20
2023-05-20
2023-05-20
回答
回答
回答
回答
回答
回答
回答
回答
回答
回答
0