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

 更新时间:2023年01月06日 15:06:17   作者:太轻描淡写了  
i18next 是一款强大的国际化框架,react-i18next 是基于 i18next 适用于 React 的框架,本文介绍了 react-i18next 的基本用法,如果更特殊的需求,文章开头的官方地址可以找到答案

本文使用 React-i18next 库结合 React, 介绍如何在 React 中配置使用国际化。
官方地址:i18next | react-i18next

简介

react-i18next 是基于 i18next 的一款强大的国际化框架,可以用于 react 和 react-native 应用;
react-i18next 特点:

  • 提供多种组件可以在hoc, hook 和 class 的情况下进行国际化操作;
  • 基于 i18next 不仅限于react,学一次就可以用在其它地方;
  • 适合服务器的渲染;
  • 有许多插件的支持,比如可以用插件检测当前系统的语言环境,从服务器或者文件系统加载翻译资源;

安装与使用

安装

# npm
npm install react-i18next i18next --save
# 如果需要检测当前浏览器的语言或者从服务器获取配置资源可以安装下面依赖
npm install i18next-http-backend i18next-browser-languagedetector --save

准备新建一个 React 项目,安装依赖包;

npm install react-i18next i18next --save

2.新建文件 en.jsonzh.json;

src\react-i18next\locales\en.json

{
	title: "Hello Word"
}

src\react-i18next\locales\zh.json

{
	title: "你好 世界"
}

3.新建 resources.jsi18n.js;

src\react-i18next\locales\resources.js

import ja from "./ja.json";
import en from "./en.json";
import zh from "./zh.json";

export const resources = {
	"ja": {
		translation: ja
	},
	"en": {
		translation: en
	},
	"zh": {
		translation: zh
	}
}

src\react-i18next\i18n.js

import i18n from 'i18next';
import { initReactI18next } from 'react-i18next';
import { resources } from './locales/resources';

i18n
	// 将 i18n 实例传递给 react-i18next
	.use(initReactI18next)
	// 初始化 i18next
	// 所有配置选项: https://www.i18next.com/overview/configuration-options
	.init({
		resources,
		fallbackLng: "zh",
		lng: "zh",
		debug: true,
		interpolation: {
			escapeValue: false, // not needed for react as it escapes by default
		}
	});

export default i18n;

使用

1.在程序入口引入 i118n;

import React from 'react';
import ReactDOM from 'react-dom/client';
import App from './App';
import "./react-i18next/i18n";

const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(
  <React.StrictMode>
	<App />
  </React.StrictMode>
);

2.在 Hooks 中使用国际化;

import { useTranslation } from "react-i18next";

function App() {
  const { t } = useTranslation();
  return (
	<div className="App">
	  {t("title")}
	</div>
  );
}

export default App;

3.在 class 组件中使用国际化;

import React from "react";
import { withTranslation } from "react-i18next";

class App extends React.Component {

  render() {
	const { t } = this.props;
	return (<div className="App">
	  {t("title")}
	</div>);
  }
}

export default withTranslation()(App);

检测当前浏览器语言国际化组件

1.安装依赖

npm install i18next-browser-languagedetector --save

2.配置使用插件

// src\react-i18next\i18n.js
import i18n from 'i18next';
import LanguageDetector from 'i18next-browser-languagedetector';
import { initReactI18next } from 'react-i18next';
import { resources } from './locales/resources';

i18n
	// 检测用户语言
	// 操作文档: https://github.com/i18next/i18next-browser-languageDetector
	.use(LanguageDetector)
	// 将 i18n 实例传递给 react-i18next
	.use(initReactI18next)
	// 初始化 i18next
	// 所有配置选项: https://www.i18next.com/overview/configuration-options
	.init({
		resources,
		fallbackLng: "en",
		lng: navigator.language,
		debug: true,
		interpolation: {
			escapeValue: false, // not needed for react as it escapes by default
		}
	});

export default i18n;

上面代码,首先导入 LanguageDetector,其次 use(LanguageDetector), 使用插件,最终在 init 配置项里配置 lng: navigator.language, 至此切换浏览器语言国际化组件完成;

手动切换国际化语言

// class 组件
const { t, i18n } = this.props;
i18n.changeLanguage("en"); 		// 手动切换到英文

// Hooks 组件
const { t, i18n } = useTranslation();
i18n.changeLanguage("zh"); 		// 手动切换到中文

总结

i18next 是一款强大的国际化框架,react-i18next 是基于 i18next 适用于 React 的框架,另外 i18next 还和很多的前端框架可以结合,所以只需要学习一次,学习成本低;
本文介绍了 react-i18next 的基本用法,如果更特殊的需求,文章开头的官方地址可以找到答案;

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

相关文章

  • React中的refs的使用教程

    React中的refs的使用教程

    本篇文章主要介绍了React中的refs的使用教程,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2018-02-02
  • React中state属性案例详解

    React中state属性案例详解

    在React中,state 是一个用于存储组件内部数据的特殊对象,每个React组件都可以包含自己的state,我们往往是通过修改state的值来驱动React重新渲染组件,这篇文章主要介绍了React中state属性,需要的朋友可以参考下
    2023-11-11
  • 一文详解React类组件中的refs属性

    一文详解React类组件中的refs属性

    react中的ref类似于vue中的ref,都是可以操作dom的,这篇文章我们通过一个demo来学习这个属性,文中有详细的代码示例供大家参考,具有一定的参考价值,需要的朋友可以参考下
    2023-08-08
  • react hooks实现原理解析

    react hooks实现原理解析

    这篇文章主要介绍了react hooks实现原理,文中给大家介绍了useState dispatch 函数如何与其使用的 Function Component 进行绑定,节后实例代码给大家介绍的非常详细,需要的朋友可以参考下
    2022-10-10
  • react中ref获取dom或者组件的实现方法

    react中ref获取dom或者组件的实现方法

    这篇文章主要介绍了react中ref获取dom或者组件的实现方法,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教
    2023-05-05
  • 通过示例讲解Remix 设计哲学理念

    通过示例讲解Remix 设计哲学理念

    这篇文章主要为大家通过示例讲解了Remix 设计哲学理念,有需要的朋友可以借鉴参考下,希望能够有所帮助,祝大家多多进步,早日升职加薪
    2023-03-03
  • React组件的生命周期详细描述

    React组件的生命周期详细描述

    本篇文章主要介绍了React组件生命周期,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2021-10-10
  • React中Redux核心原理深入分析

    React中Redux核心原理深入分析

    这篇文章主要介绍了如何在React中Redux原理,目前redux在react中使用是最多的,所以我们需要将之前编写的redux代码,融入到react当中去,本文给大家详细讲解,需要的朋友可以参考下
    2022-11-11
  • React实践之Tree组件的使用方法

    React实践之Tree组件的使用方法

    本篇文章主要介绍了React实践之Tree组件的使用方法,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2017-09-09
  • React组件二次包装的具体实现

    React组件二次包装的具体实现

    本文主要介绍了React组件二次包装的具体实现,文中通过示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2022-02-02

最新评论