纯净、安全、绿色的下载网站

首页|软件分类|下载排行|最新软件|IT学院

当前位置:首页IT学院IT技术

React国际化react-i18next React国际化react-i18next详解

猫老板的豆   2021-10-22 我要评论
想了解React国际化react-i18next详解的相关内容吗,猫老板的豆在本文为您仔细讲解React国际化react-i18next的相关知识和一些Code实例,欢迎阅读和指正,我们先划重点:React国际化react-i18next,react-i18next,下面大家一起来学习吧。

在这里插入图片描述

简介

react-i18next 是基于 i18next 的一款强大的国际化框架,可以用于 reactreact-native 应用,是目前非常主流的国际化解决方案。

i18next 有着以下优点:

  • 基于i18next不仅限于react,学一次就可以用在其它地方
  • 提供多种组件在hoc、hook和class的情况下进行国际化操作
  • 适合服务端的渲染
  • 历史悠久,始于2011年比大多数的前端框架都要年长
  • 因为历史悠久所以更成熟,目前还没有i18next解决不了的国际化问题
  • 有许多插件的支持,比如可以用插件检测当前系统的语言环境,从服务器或者文件系统加载翻译资源

安装

需要同时安装 i18nextreact-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高阶函数来完成语言配置的数据注入

方法二

函数式组件 中使用useTranslationhook 来处理国际化

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

相关文章

猜您喜欢

  • @RequestBody接收字符串 springboot @RequestBody 接收字符串实例

    想了解springboot @RequestBody 接收字符串实例的相关内容吗,sayyy在本文为您仔细讲解@RequestBody接收字符串的相关知识和一些Code实例,欢迎阅读和指正,我们先划重点:springboot接收字符串,@RequestBody接收字符串,接收字符串,下面大家一起来学习吧。..
  • python引用和匿名函数 python基础之引用和匿名函数

    想了解python基础之引用和匿名函数的相关内容吗,qianqqqq_lu在本文为您仔细讲解python引用和匿名函数的相关知识和一些Code实例,欢迎阅读和指正,我们先划重点:python引用函数,python匿名函数,下面大家一起来学习吧。..

网友评论

Copyright 2020 www.9aisf.com 【就爱软件站】 版权所有 软件发布

声明:所有软件和文章来自软件开发商或者作者 如有异议 请与本站联系 点此查看联系方式