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

目录
  • 简介
  • 安装与使用
    • 安装
    • 准备新建一个 React 项目,安装依赖包;
    • 使用
    • 检测当前浏览器语言国际化组件
    • 手动切换国际化语言
  • 总结

本文使用 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 国际化内容请搜索我们以前的文章或继续浏览下面的相关文章希望大家以后多多支持我们!

(0)

相关推荐

  • React国际化react-i18next详解

    简介 react-i18next 是基于 i18next 的一款强大的国际化框架,可以用于 react 和 react-native 应用,是目前非常主流的国际化解决方案. i18next 有着以下优点: 基于i18next不仅限于react,学一次就可以用在其它地方 提供多种组件在hoc.hook和class的情况下进行国际化操作 适合服务端的渲染 历史悠久,始于2011年比大多数的前端框架都要年长 因为历史悠久所以更成熟,目前还没有i18next解决不了的国际化问题 有许多插件的支持,比如可

  • 在 React 中使用 i18next的示例

    目录 1. 安装依赖 2. 在src下创建i18n文件夹 2.1 common下的zh-CN.js 2.2 common下的en-US.js 2.3 在common的index.js文件中引入 2.4 在resources.js中引入common模块的翻译 2.5 utils下初始化语言的方法 2.6 i18n.js代码如下 3. 在app.tsx中引入 4. 页面中使用 1. 安装依赖 npm i i18next react-i18next i18next-browser-languagede

  • 深入浅析React中diff算法

    React中diff算法的理解 diff算法用来计算出Virtual DOM中改变的部分,然后针对该部分进行DOM操作,而不用重新渲染整个页面,渲染整个DOM结构的过程中开销是很大的,需要浏览器对DOM结构进行重绘与回流,而diff算法能够使得操作过程中只更新修改的那部分DOM结构而不更新整个DOM,这样能够最小化操作DOM结构,能够最大程度上减少浏览器重绘与回流的规模. 虚拟DOM diff算法的基础是Virtual DOM,Virtual DOM是一棵以JavaScript对象作为基础的树,

  • vue和react中props变化后如何修改state

    目录 vue和react中props变化后修改state 改进 react改变state必须知道的知识点 1.不能直接修改state 2.state的更新是异步的 3.state的更新是一个合并的过程 state与不可变对象 vue和react中props变化后修改state 如果只想在 state 更改时重新计算某些数据,比如搜索框案例. vue <template> <div> <input type="text" v-model="filt

  • 在React中如何优雅的处理事件响应详解

    前言 本文主要给大家介绍的是关于React处理事件响应的相关内容,分享出来供大家参考学习,下面来一起看看详细的介绍吧. React中定义一个组件,可以通过React.createClass或者ES6的class.本文讨论的React组件是基于class定义的组件.采用class的方式,代码结构更加清晰,可读性强,而且React官方也推荐使用这种方式定义组件. 处理事件响应是Web应用中非常重要的一部分.React中,处理事件响应的方式有多种. 一.使用箭头函数 先上代码: //代码1 class

  • 浅谈React中组件间抽象

    关于今天要学习的组件间抽象其实我这小白看了几次还没弄明白,这次决定一探究竟.在组件构建中,通常有一类功能需要被不同的组件公用,此时就涉及抽象的概念,在React中我们主要了解mixin和高阶组件. mixin mixin的特性广泛存在于各个面向对象语言中,在ruby中,include关键词就是mixin,是将一个模块混入到另外一个模块中,或者是类中. 封装mixin方法 const mixin = function(obj, mixins) { const newObj = obj newObj

  • React中使用axios发送请求的几种常用方法

    目录 React中安装并引入axios依赖 使用axios进行GET请求 使用axios.get方式 使用axios(config {...}) 使用axios进行POST请求 使用axios.post 使用axios(config {...}) 同时发送多个请求 详细config对象配置项 axios的返回值对象response axios的全局配置 axios的单一实例化配置 axios拦截器的使用 React中安装并引入axios依赖 在React项目中使用axios请求,首先需要安装ax

  • React中实现插槽效果的方案详解

    目录 React实现插槽 children实现插槽 props实现插槽 React实现插槽 在开发中,我们抽取了一个组件,但是为了让这个组件具备更强的通用性,我们不能将组件中的内容限制为固定的div.span等等这些元素. 我们应该让使用者可以决定某一块区域到底存放什么内容 这种需求在Vue当中有一个固定的做法是通过slot来完成的,React呢? 在React中是没有插槽的概念的, 或者说在React中是不需要插槽的, 因为React对于这种需要插槽的情况非常灵活,有两种方案可以实现: 组件的

  • 在 React 中使用 Redux 解决的问题小结

    目录 在 React 中使用 Redux 解决的问题 在 React 项目中加入 Redux 的好处 React + Redux 安装 Redux React 中 Redux 的工作流程 React 计数器案例 使用 Redux Provide 组件 connect 方法 使用 bindActionCreators 方法继续简化 代码重构 为 Action 传递参数 Redux 弹出框 初始化静态内容 添加默认隐藏状态 定义操作按钮 衍生的问题 拆分合并 reducer 拆分 合并 调整组件 在

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

    目录 简介 安装与使用 安装 准备新建一个 React 项目,安装依赖包: 使用 检测当前浏览器语言国际化组件 手动切换国际化语言 总结 本文使用 React-i18next 库结合 React, 介绍如何在 React 中配置使用国际化.官方地址:i18next | react-i18next 简介 react-i18next 是基于 i18next 的一款强大的国际化框架,可以用于 react 和 react-native 应用:react-i18next 特点: 提供多种组件可以在hoc,

  • React中的render何时执行过程

    我们都知道Render在组件实例化和存在期时都会被执行.实例化在componentWillMount执行完成后就会被执行,这个没什么好说的.在这里我们主要分析存在期组件更新时的执行. 存在期的方法包含: - componentWillReceiveProps - shouldComponentUpdate - componentWillUpdate - render - componentDidUpdate 这些方法会在组件的状态或者属性发生发生变化时被执行,如果我们使用了Redux,那么就只有

随机推荐