【react-intl组件】系统国际化—

场景： 系统要实现多语言支持，在系统顶部配置语言菜单，默认为中文，用户选择其他语种后，界面的固定展示信息切換到其他语种。

参考：在 React 项目中使用 React-intl 实现多语言支持

经过多方面的考察，决定选择较为成熟的库react-intl来实现系统多语言配置。

使用步骤

1.安装react-intl

npm install react-intl --save

注意： 为了兼容Safari各个版本，需要同时安装 intl，intl在大部分的『现代』浏览器中是默认自带的，但是Safari和IE11以下的版本就没有了，这里需要留个心眼。

安装intl需要在终端中输入以下指令：

npm install intl --save

2.配置locale文件
在src下新建一个locales文件夹，放置en_US.js和zh_TW.js文件，分别为英文和中文的配置包。

const enUS = {help: "Help",personalCenter: "Personal center",logout: "Sign out",
};
export default enUS;

const zhTW = {help: "幫助",personalCenter: "個人中心",logout: "退出登錄",
};
export default zhTW;

3.引入react-intl
由于IntlProvider包裹一次即可生效，把它包裹在系统根组件最外层即可。
locale用于国际化数字、日期等，默认为en，这里设置成浏览器语言；
messages接受的是一个对象，即引入的语言包。

import { IntlProvider } from "react-intl";
import zhTW from "../locales/zh_TW";
import enJS from "../locales/en_US";handleMessages = lang => {let res = null;switch (lang) {case "zhTW":res = zhTW;break;case "enUS":res = enJS;break;default:res = zhTW;}return res;};//...<div className={styles.root}><IntlProviderlocale={navigator.language}messages={this.handleMessages(lang)}><Layout>// ...</Layout></IntlProvider></div>

4.配置多语言字符串
在需要国际化的地方引入FormattedMessage，传入对应的id：

import { FormattedMessage } from "react-intl";
//...
<div>{/* 幫助 */}<FormattedMessage id="help" /></div>

FormattedMessage也可以传入参数，写法如下：

<FormattedMessageid='superHello'description='say hello to Howard.'defaultMessage='Hello, {someone}'values={someone:this.props.name,}/>

同时locale配置：

superHello:"你好，{ someone } !"

更多用法可以参考官网。

PS： antd pro使用的是umi 插件 umi-plugin-locale ，封装了react-intl, api 与 react-intl 基本相同，并做了封装使用起来更加方便。
可以参考：https://pro.ant.design/docs/i18n-cn

【react-intl组件】系统国际化——react-intl用法相关推荐

react 验证码组件_使用React.JS和Twilio服务创建电话号码验证组件。
react 验证码组件介绍 (Introduction) Phone number verification is required for phone sign-in or Two Factor ...
React初体验-Hello React的组件化方式-React入门小案例
文章目录 React初体验 Hello React案例演练 Hello React案例升级 Hello React的组件化组件化的方式数据依赖事件绑定其他案例练习电影列表展示计数器的案例 ...
[react] 你有使用过React Intl吗？
[react] 你有使用过React Intl吗? 一种react国际化的解决方案个人简介我是歌谣,欢迎和大家一起交流前后端知识.放弃很容易, 但坚持一定很酷.欢迎大家一起讨论主目录与歌谣一起 ...
vue 新手指引_精通react/vue组件设计之快速实现一个可定制的进度条组件
前言这篇文章是笔者写组件设计的第四篇文章,之所以会写组件设计相关的文章,是因为作为一名前端优秀的前端工程师,面对各种繁琐而重复的工作,我们不应该按部就班的去"辛勤劳动",而是要根 ...
vue 渲染函数处理slot_面试官：Vue 和 React 对于组件的更新粒度有什么区别？
前言我们都知道 Vue 对于响应式属性的更新,只会精确更新依赖收集的当前组件,而不会递归的去更新子组件,这也是它性能强大的原因之一. 例子举例来说这样的一个组件: <div> {{ ...
client高性能组件化框架React简单介绍、特点、环境搭建及经常使用语法
[本文源址:http://blog.csdn.net/q1056843325/article/details/54729657 转载请加入该地址] 明天就是除夕了预祝大家新春快乐 [ ]~(￣▽￣) ...
beeshell —— 开源的 React Native 组件库
背景 beeshell 是一个 React Native 应用的基础组件库,基于 0.53.3 版本,提供一整套开箱即用的高质量组件,包含 JavaScript(以下简称 JS)组件和复合组件(包含 ...
antd table设置表格一个单元格的字体颜色_alireacttable：高性能 React 表格组件
点击上方蓝字关注我们简介在前端开发中,表格一直都是最复杂的组件之一.表格不仅要支持丰富的操作(排序.过滤.搜索.分页.自定义列等),还要有非常好的性能以展示大量数据.很多组件库(例如 fusion ...
一个播放器引发的思考——谈谈React跨组件通信
在我们react项目日常开发中,往往会遇到这样一个问题:如何去实现跨组件通信? 为了更好的理解此问题,接下来我们通过一个简单的栗子说明. 实现一个视频播放器假设有一个这样的需求,需要我们去实现一个简 ...
React中组件间通信的方式
React中组件间通信的方式 React中组件间通信包括父子组件.兄弟组件.隔代组件.非嵌套组件之间通信. Props props适用于父子组件的通信,props以单向数据流的形式可以很好的完成父子组 ...

【react-intl组件】系统国际化——react-intl用法

使用步骤

【react-intl组件】系统国际化——react-intl用法相关推荐

最新文章

热门文章