我的编程空间,编程开发者的网络收藏夹
学习永远不晚

React国际化react-i18next详解

短信预约 -IT技能 免费直播动态提醒
省份

北京

  • 北京
  • 上海
  • 天津
  • 重庆
  • 河北
  • 山东
  • 辽宁
  • 黑龙江
  • 吉林
  • 甘肃
  • 青海
  • 河南
  • 江苏
  • 湖北
  • 湖南
  • 江西
  • 浙江
  • 广东
  • 云南
  • 福建
  • 海南
  • 山西
  • 四川
  • 陕西
  • 贵州
  • 安徽
  • 广西
  • 内蒙
  • 西藏
  • 新疆
  • 宁夏
  • 兵团
手机号立即预约

请填写图片验证码后获取短信验证码

看不清楚,换张图片

免费获取短信验证码

React国际化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


配置

class="lazy" data-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>
    );
};

到此这篇关于React国际化react-i18next的文章就介绍到这了,更多相关React国际化react-i18next内容请搜索编程网以前的文章或继续浏览下面的相关文章希望大家以后多多支持编程网!

免责声明:

① 本站未注明“稿件来源”的信息均来自网络整理。其文字、图片和音视频稿件的所属权归原作者所有。本站收集整理出于非商业性的教育和科研之目的,并不意味着本站赞同其观点或证实其内容的真实性。仅作为临时的测试数据,供内部测试之用。本站并未授权任何人以任何方式主动获取本站任何信息。

② 本站未注明“稿件来源”的临时测试数据将在测试完成后最终做删除处理。有问题或投稿请发送至: 邮箱/279061341@qq.com QQ/279061341

React国际化react-i18next详解

下载Word文档到电脑,方便收藏和打印~

下载Word文档

猜你喜欢

React 中使用 react-i18next 国际化的过程(react-i18next 的基本用法)

i18next 是一款强大的国际化框架,react-i18next 是基于 i18next 适用于 React 的框架,本文介绍了 react-i18next 的基本用法,如果更特殊的需求,文章开头的官方地址可以找到答案
2023-01-06

React-Intl,实现 React 项目的前端国际化

React 项目默认你已经搭建好了。可以用过气的 CRA,流行的 vite,或者用 React 推荐的 Next.js。
ReactReact-Intl2024-11-30

React 中的国际化优秀实践

在数据驱动 UI 的考虑之下,我们很容易能够想到实现方案,因为文字内容成为了变化量,所以文字内容就应该抽象成具体的数据。结合语言切换,会导致文字内容发生变化,那么很容易能够想到,我们应该设计一个状态,来表示当前选中的语言是什么。

React Fiber 树思想解决业务实际场景详解

这篇文章主要为大家介绍了React Fiber 树思想解决业务实际场景详解,有需要的朋友可以借鉴参考下,希望能够有所帮助,祝大家多多进步,早日升职加薪
2022-12-19

react之umi配置国际化语言locale的踩坑记录

这篇文章主要介绍了react之umi配置国际化语言locale的踩坑记录,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教
2023-02-10

一文详解React渲染优化之useImmer

在React日常开发中,我们常常被重复渲染或无意义渲染所折磨,穷尽脑汁,做各种优化:memo、useMemo、useCallback、immutable等,本文主要讲述immutable的简约版Immer,感兴趣的同学可以一起来学习
2023-05-19

react redux及redux持久化示例详解

这篇文章主要为大家介绍了react redux及redux持久化示例详解,有需要的朋友可以借鉴参考下,希望能够有所帮助,祝大家多多进步,早日升职加薪
2022-11-13

React性能优化的实现方法详解

react凭借virtualDOM和diff算法拥有高效的性能,除此之外也有很多其他的方法和技巧可以进一步提升react性能,在本文中我将列举出可有效提升react性能的几种方法,帮助我们改进react代码,提升性能
2023-01-30

React数据获取与性能优化详解

这篇文章主要为大家介绍了React数据获取与性能优化方法示例详解,有需要的朋友可以借鉴参考下,希望能够有所帮助,祝大家多多进步,早日升职加薪
2022-11-13

详解React自定义Hook

在React项目中,我们经常会使用到React自带的几个内置Hooks,如useState,useContext和useEffect。虽然在React中找不到这些Hooks,但React提供了非常灵活的方式让你为自己的需求来创建自己的自定义Hooks,想了解更多的,欢迎阅读本文
2023-05-17

编程热搜

目录