概况
react-intl-universal 是一个国际化库，专门为 React 应用提供多语言支持。与 React 原生的 react-intl 相比，react-intl-universal 支持从远程服务器加载语言包，动态切换语言，并且可以不依赖于 React 组件。

GitHub地址：

GitHub - alibaba/react-intl-universal: Internationalize React apps. Not only for Component but also for Vanilla JS.
Internationalize React apps. Not only for Component but also for Vanilla JS. - alibaba/react-intl-universal
https://github.com/alibaba/react-intl-universal

安装
可以通过 npm 或 yarn 来安装该依赖，命令如下：

npm install react-intl-universal --save

或者

yarn add react-intl-universal
文件结构
安装依赖完成后就可以创建对应的文件夹以用来保存各类语种的翻译。

一般情况下，都存放在根目录==> src ==> locales 目录下。

这里我只做了中英文的翻译，如果你想添加更多语种则可以添加对应的json文件。

注意！这里创建的文件类型是json而不是js。

引入
初始化react-intl-universal插件，

通常在应用启动时（如在 componentDidMount 或 useEffect 中）初始化 react-intl-universal，并加载对应的语言包。

一般情况下这个引入过程都应该放在入口文件上，或者顶级layout中，以方便做中英文切换的按钮。

import React, { Component } from 'react'
import intl from 'react-intl-universal';
const locales = {
"en": require('../locales/en-US.json'),
"zh": require('../locales/zh-CN.json'),
};

export default class index extends Component {
constructor(props) {
super(props);
this.state = {
currentLocale: this.props?.baseInfo?.currentLocale || 'zh',
}
}
componentDidMount() {
this.loadLocales()
}
loadLocales() {
const { currentLocale } = this.state
intl.init({
currentLocale: currentLocale,
locales,
}).then(() => {});
}

render() {
return (

)

}
}

使用
假如我现在有两个文件，一个en-US.json，一个zh-CN.json。内容分别如下。

// en-US.json
{
"HELLO": "Hello!",
"WELCOME": "Welcome to {place}."
}

// zh-CN.json
{
"HELLO": "你好！",
"WELCOME": "欢迎来到{place}。"
}
正常使用
在对应组件中引入 intl 然后使用 intl.get 就可以获取对应的翻译内容。

注意！这里get方法内传入的字符串，必须与zh-CN.json和en-US.json中对应翻译的ID一致，且区分大小写。

import intl from 'react-intl-universal';

const greeting = intl.get('HELLO');
console.log(greeting); // 输出: "Hello!" 或 "你好！"
传参使用
基本用法一致，传参的话可以根据当前语言也做一下判断。

import intl from 'react-intl-universal';

const greeting = intl.get('WELCOME',{place: '百京'});
console.log(greeting); // 输出: "Welcome to 百京" 或 "欢迎来到百京"

大聪明码农徐
关注

6

8

0

专栏目录
React 结合 react-i18next 实现中英文切换
weixin_57002812的博客
2010
是基于i18next的一款强大的国际化框架，可以用于react和应用，是目前非常主流的国际化解决方案。
react项目国际化
baozhuona的博客
1927
文章目录一：国际化的实现原理二：用react-intl实现国际化 一：国际化的实现原理 准备自己翻译好的语言包例如zh.json、en.json（结构为{ ‘hello’: ‘你好，世界’}），用一个变量存储当前选择的语言locale，根据locale选择应用哪个json, 再根据id ‘hello’，替换为对应的message ‘你好，世界’ 二：用react-intl实现国际化 步骤概要...
react项目实现中英文国际化切换
weixin_46533954的博客
643
react实现国际化语言
react国际化中英文切换
热门推荐
全栈攻略
1万+
react项目需要支持国际化，推荐插件“react-intl-universal”，原因是“react-intl”存在一些“致命”缺陷，官网有介绍。 下面具体介绍一下这款插件的详细使用 1. 安装 npm install react-intl-universal --save 2. 初始化 语言配置 2.1. 配置语言包json配置文件 项目根目录新建配置文件如上图 2.2 英文配置文件 ....
前端国际化之react中英文切换
方寸者的博客
6882
文章目录React国际化库推荐react-intl-universal库使用介绍安装初始化调用切换进阶 React国际化库推荐 在国际化React应用程序的情况下，react-intl库是业界很受欢迎的库之一。 react-intl用包裹组件的形式装饰你的React.Component，动态注入国际化消息，以便能够动态加载语言环境数据，并且无需重新加载页面。以下是使用react-intl的示例代码...
react-intl-universal实现中英文语言切换（国际化）
qq_32445707的博客
3885
最近公司为了跟上时代潮流，要求我把之前的项目都进行国际化，实现中英文双语言切换功能，然后我只能连夜调研各大国际化组件，最终选择了这个react-intl-universal，它相比于 react-intl、react-i18next最大的亮点就是支持在js中使用，并且配置简单，提供的API也简单好用。 npm安装： npm install react-intl-universal --save 一、编写好中、英文json配置文件 ...
react(Hooks)实现国际化
laishaojiang的博客
742
转到国际项目组之后，做的项目都是多语言的，上次的项目是用搭建的，所以使用的是这个插件，具体可以看这：vue3实现国际化这次的项目是用搭建的，也顺手整理一下技术栈：Hooks + vite + antd + recoil多语言插件使用的是需要同时安装两个包 在src下新建locals文件夹,包含,,(只做中英文切换) 最后在引入就好了(这里比vue简单些) 至此插件就算配置好了对比vue，在react中使用比较简单，只需要用到方法即可，有两种方式可以使用 直接从中引入 关于还有很多用法，具体还是去
react i18n实现国际化
还想陪你看场雪
333
用react i18next 实现中英文切换国际化
react-umi 国际化 （中英文切换）
mengfanyue123的博客
5383
.umirc.js国际化默认配置 export default { plugins: [ [ 'umi-plugin-react', { locale: { default: 'zh-CN', //默认语言 zh-CN baseNavigator: true, // 为true时，用navigator.language的值作为默认语言 antd: true // 是否启用antd的 {' '} ); } 4. 在顶层组件中使用 `IntlProvider` 组件，指定当前语言和语言文件：jsx import { IntlProvider } from 'react-intl'; import lang from './lang.json'; function App() { const locale = 'zh'; // or 'en' return ( ); } 5. 在需要切换语言的地方，更新 `locale` 和 `messages` 属性即可。jsx function LanguageSwitcher() { const [locale, setLocale] = useState('zh'); function handleSwitch() { setLocale(locale === 'zh' ? 'en' : 'zh'); } return (

400-660-0108

kefu@csdn.net

在线客服
工作时间 8:30-22:00
公安备案号11010502030143
京ICP备19004658号
京网文〔2020〕1039-165号
经营性网站备案信息
北京互联网违法和不良信息举报中心
家长监护
网络110报警服务
中国互联网举报中心
Chrome商店下载
账号管理规范
版权与免责声明
版权申诉
出版物许可证
营业执照
©1999-2024北京创新乐知网络技术有限公司
目录
概况
安装
文件结构
引入
使用
正常使用
传参使用

举报