AI 助理
备案控制台
开发者社区 云原生 文章 正文

react-intl——react国际化使用方案

2024-09-18 45
版权
版权声明：
本文内容由阿里云实名注册用户自发贡献，版权归原作者所有，阿里云开发者社区不拥有其著作权，亦不承担相应法律责任。具体规则请查看《 阿里云开发者社区用户服务协议》和 《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容，填写 侵权投诉表单进行举报，一经查实，本社区将立刻删除涉嫌侵权内容。
简介： react-intl——react国际化使用方案

国际化介绍
i18n：internationalization 国家化简称，首字母+首尾字母间隔的字母个数+尾字母，类似的还有 k8s(Kubernetes)

React-intl是 React 中最受欢迎的库。

使用步骤
安装

use npm

npm install react-intl -D

use yarn

1
2
3
项目入口文件配置

// index.tsx
import React from "react";
import ReactDOM from "react-dom";
import { IntlProvider } from "react-intl";
import App from "src/App";
import { getCurrentLang, getCurrentMessages } from "src/locales";
import "./styles/index.less";

const root = (



);

ReactDOM.render(root, document.getElementById("root"));
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
IntlProvider 有三个配置参数：

locale, , 语言标记，例如 'zh-CN' 'en-US'
messages, , 国际化所需的 key-value 对象
formats, , 自定义 format，比如日期格式、货币等
在 src/locales 中创建国际化文件，一般有 en 和 zh，如

├─src
│ ├─en
│ │ ├─index.ts
│ ├─zh
│ │ ├─index.ts
| |——index.ts
1
2
3
4
5
6
添加键值对并导出

// zh/index.ts
export default {
whatever: 你好 {placeholder},
};
1
2
3
4
// locales/index.ts
import zh from './zh';
import en from './en';

import ls from 'src/utils/localStore';
import { createIntl, createIntlCache } from 'react-intl';

const _currentLang = ls.getItem('qs_lang') || 'zh-CN';
const messages = {
'zh-CN': zh,
'en-US': en,
};
export const getCurrentLang = () => _currentLang;
export const getCurrentMessages = () => messages[_currentLang];

const cache = createIntlCache();
const intl = createIntl(
{
locale: _currentLang,
messages: getCurrentMessages(),
},
cache
);

export default intl;

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
接着在组件中就可以使用FormattedMessage等组件

import React from "react";
import { FormattedMessage } from "react-intl";

const App = () => {
return (

);
};

export default App;
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
或者在函数式组件中使用 hooks

import { useIntl } from "react-intl";

const App = () => {
const { formatMessage: f } = useIntl();
return (
<>
{f(
{
id: "whatever",
description: "hello world",
defaultMessage: "Hello {placeholder}",
},
{ placeholder: "world" }
)}
</>
);
};

export default App;

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19

组件中可以通过values属性来传值，如以上例子传递{placeholder: 'world'}，渲染到对应的你好 {placeholder}位置
formatMessage中传递第二个参数作为占位符的入参
如何在非组件中使用 react-intl
例如我需要在组件目录下添加constants.ts文件来管理静态变量，而且需要国际化处理，因为它不是 react 组件，所以是没法用以上的方法处理。

这时候就需要使用createIntl来处理，createIntl 允许在不使用 Provider 的情况下创建 IntlShape 对象，它返回一个可以在 React 组件外部使用的对象。

// locales/index.ts
import { createIntl, createIntlCache } from 'react-intl';
...
const cache = createIntlCache();
const intl = createIntl(
{
locale: _currentLang,
messages: getCurrentMessages(),
},
cache
);

export default intl;
1
2
3
4
5
6
7
8
9
10
11
12
13
在非组件文件中使用时

// xxx/constants.ts
import intl from "src/locales";

const a = intl.formatMessage(
{ id: "whatever", defaultMessage: "你好 {world}" },
{ placeholder: "world" }
);
1
2
3
4
5
6
7
更多
react-intl还能处理像货币、时间、数字等等各种国际化问题，更多请参考官方文档

github上的demo

antd 国际化方案
参考国际化

其实就是使用 React 的 context 特性，只需要一个 Provider Component，用它来提供国际化的上下文。

import zhCN from "antd/es/locale/zh_CN";

return (



);
1
2
3
4
5
6
7
react-intl结合antd使用
以上步骤完成后，在切换语言为英文时，react-intl中使用的国际化文案正常显示。但此时会发现antd中组件依然显示的是中文，因为此时我们还没有对antd组件的国际化进行处理。

在src/locales中导出antd相关的国际化文案
在入口文件index.tsx中antd全局配置组件中引入即可
// src/locales/index.ts
import zh from './zh';
import en from './en';

import enUS from 'antd/es/locale/en_US';
import zhCN from 'antd/es/locale/zh_CN';
import ls from 'src/utils/localStore';
import { createIntl, createIntlCache } from 'react-intl';

const _currentLang = ls.getItem('qs_lang') || 'zh-CN';
export const getCurrLang = () => _currentLang;

const messages = {
'zh-CN': zh,
'en-US': en,
};

export const antMessages = {
'zh-CN': zhCN,
'en-US': enUS,
};

export const getAntMessages = () => antMessages[_currentLang];

export const getCurrentMessages = () => messages[_currentLang];
...

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
// src/index.tsx
import React from "react";
import ReactDOM from "react-dom";
import { IntlProvider } from "react-intl";
import App from "src/App";
import { ConfigProvider } from "antd";
import { getCurrentLang, getCurrentMessages, getAntMessages } from "src/locales";
import "./styles/index.less";

const root = (





);

ReactDOM.render(root, document.getElementById("root"));

文章标签：
前端开发
容器
Kubernetes
资源调度
关键词：
React Native方案
React Native国际
游客zi3qmblbcdexu
目录
相关文章
答神~
|
6月前
|
自然语言处理 前端开发 JavaScript
【第52期】一文读懂React国际化 (i18n)
【第52期】一文读懂React国际化 (i18n)
答神~
731 1
前端徐徐
|
26天前
|
移动开发 前端开发 JavaScript
React DnD：实现拖拽功能的终极方案？
本文首发于微信公众号“前端徐徐”，介绍了一个强大的 React 拖拽库——React DnD。React DnD 帮助开发者轻松创建复杂的拖拽界面，适用于 Trello 风格的应用、列表重排序、可拖拽的 UI 组件等场景。文章详细介绍了 React DnD 的基本信息、主要特点、使用场景及快速上手指南。
前端徐徐
66 3
React DnD：实现拖拽功能的终极方案？
游客zi3qmblbcdexu
|
1月前
|
JSON 自然语言处理 前端开发
React国际化中英文切换实现
React国际化中英文切换实现
游客zi3qmblbcdexu
30 1
前端徐徐
|
1月前
|
缓存 前端开发 JavaScript
10 种方案提升你 React 应用的性能
本文首发于微信公众号「前端徐徐」，作者徐徐分享了提升 React 应用性能的方法。文章详细介绍了 `useMemo`、虚拟化长列表、`React.PureComponent`、缓存函数、使用 Reselect、Web Worker、懒加载、`React.memo`、`useCallback` 和 `shouldComponentUpdate` 等技术，通过实际案例和代码示例展示了如何优化 React 应用的性能。这些方法不仅减少了不必要的重新渲染和计算，还提升了应用的响应速度和用户体验。
前端徐徐
20 0
Ant.Dream
|
2月前
|
开发框架 Dart 前端开发
Android 跨平台方案对比之Flutter 和 React Native
本文对比了 Flutter 和 React Native 这两个跨平台移动应用开发框架。Flutter 使用 Dart 语言，提供接近原生的性能和丰富的组件库；React Native 则基于 JavaScript，具备庞大的社区支持和灵活性。两者各有优势，选择时需考虑团队技能和项目需求。
Ant.Dream
355 8
Star时光
|
3月前
|
缓存 监控 前端开发
React 代码优化方案
【8月更文挑战第19天】React 代码优化方案
Star时光
56 0
九七啊
|
6月前
|
监控 前端开发 搜索推荐
react 表单受控的现代实现方案
`react-form-simple`是一个轻量级的React表单库，专注于简化受控表单的开发，提供数据绑定、验证、错误处理和UI更新等功能。它通过简洁的API减少复杂性，支持第三方UI库集成，并具备高度可扩展性。核心特点包括基于Proxy的数据绑定、实时错误处理、高效的UI更新和灵活的使用方式。通过`useForm`和`render`等钩子，开发者可以快速构建表单应用，同时支持动态表单和自定义验证规则。该库旨在提高开发效率，适用于复杂表单场景，降低学习和维护成本。
九七啊
218 2
react 表单受控的现代实现方案
小周sir
|
4月前
|
缓存 监控 前端开发
react 性能优化方案？
【7月更文挑战第15天】改善React应用性能的关键策略包括：使用生产环境构建减少体积，避免不必要的渲染（如用React.memo或PureComponent），正确设置列表渲染的key，简化组件层级，实施懒加载，避免render中的复杂计算，选择优化过的库，控制重渲染范围，监控性能并合并state更新。这些优化能提升响应速度和用户体验。
小周sir
53 0
vohelon
|
6月前
|
存储 前端开发 JavaScript
React Hooks 的替代方案有哪些？
【5月更文挑战第28天】React Hooks 的替代方案有哪些？
vohelon
65 2
云高风轻
|
缓存 前端开发 JavaScript
react中的性能优化方案有哪些
react中的性能优化方案有哪些
云高风轻
69 0

热门文章

最新文章

  • 1
    照着官方文档学习react
  • 2
    React Native-组件的引用
  • 3
    【REACT NATIVE 系列教程之二】创建自定义组件&&导入与使用示例
  • 4
    React中的Virtual DOM(看这一篇就够了)
  • 5
    react学习系列4 组件生命周期
  • 6
    React Native填坑之旅 -- 回归小插曲
  • 7
    React Native 运行报错 error in opening zip file
  • 8
    「前端工程化」从0-1搭建react，ts脚手架（1.2w字超详细教程）
  • 9
    发现了一款宝藏学习项目，包含了Web全栈的知识体系，JS、Vue、React知识就靠它了！
  • 10
    react实战笔记123:使用await
  • 1
    React useMemo钩子指南：优化计算性能
    93
  • 2
    掌握React中的useCallback：优化性能的秘诀
    93
  • 3
    深入理解React中的useReducer：管理复杂状态逻辑的利器
    207
  • 4
    掌握React中的useContext：访问父组件数据的神奇技巧
    149
  • 5
    掌握React中的useEffect：函数组件中的魔法钩子
    150
  • 6
    深入理解React中的useState：函数组件状态管理的利器
    297
  • 7
    React Hooks：让你轻松掌握函数组件的状态与管理
    121
  • 8
    React中渲染html结构---dangerouslySetInnerHTML
    54
  • 9
    vue中nextTick函数和react类似实现
    218
  • 10
    探索React中的类组件和函数组件
    70

    • 相关课程

    更多
  • React 入门与实战
  • React 入门教程开发文档
  • Vue.js 入门与实战
  • Vue.js完全自学手册图文教程

    • 相关电子书

    更多
  • 利用编译将 Vue 组件转成 React 组件
  • React Native 全量化实践
  • React在大型后台管理项目中的工程实践
    • 下一篇
    阿里云OSS设置跨域访问