React-intl 实现多语言
前言
React 做国际化,我推荐使用 React-intl , 这个库提供了 React 组件和Api两种方式来格式化日期,数字和字符串等。知道这个库了,那让我们开始使用它
组件用法
为了和React 比较融和,我们可以使用组件的方式
1.安装
npm install react-intl --save
2.添加引用
import {IntlProvider, addLocaleData} from 'react-intl';
3.添加 locale 配置文件
zh-CN.js
const zh_CN = {
'intl.hello': "你好",
'intl.name': '我的名字是 {name}'
}
export default zh_CN;
en-US.js
const en_US = {
'intl.hello': "hello",
'intl.name': 'my name is {name}'
}
export default en_US;
4.使用<IntlProvider />
这个组件用于设置 i18n 的上下文,它将包装应用程序的根组件,以便整个应用程序将配置在 i18n 的上下文中.
最主要的两个配置项是: loacle 当前的语言环境 messages 当前语言的内容。
我们要动态切换语言,需要动态改这两个配置。
import zhCN from './locale/zh.js'; //导入 i18n 配置文件
import enUS from './locale/en.js';
addLocaleData([...en, ...zh]);
export default class Root extends Component {
static propTypes = {
store: PropTypes.object.isRequired,
history: PropTypes.object.isRequired
}
render() {
const { store , history } = this.props;
return (
<IntlProvider locale='zh' messages={zhCN}>
<Provider store={store}>
<Router history={history}>
</Router>
</Provider>
</IntlProvider>
)
}
}
5.使用<FormattedMessage />
基础用法
<FormattedMessage
id="intl.hello"
defaultMessage={'hello'}
/>
如果当前语言环境是 中文,它会显示你好 ,如果是英文环境,会显示Hello.
动态传值
<FormattedMessage
id="intl.name"
values={{name: <b>{name}</b>}}
/>
我们定义 intl.name
的时候模板里用到了{name}
,这个代表我们可以动态传值,我们可以通过FormattedMessage中的 values 属性传一个JSON对象,这是就会动态显示我们的内容了。
6.其它组件用法
Ract-intl 为我们提供了丰富的组件,可以帮我们很好的处理字符串,时间,日期 ,大家可以自己查看 API,如有不明白的地方,我可以留言。
API用法
有时候我们可能需要在代码中动态做 国际化,这就需要动态API 了。下面我简单介绍下怎么用
1.导入 injectIntl
import { injectIntl, FormattedMessage } from 'react-intl'
;
2.在组件中注入
export default connect(mapStateToProps,mapActionCreators)(injectIntl(App))
我在项目中用到了Redux,注入的时候应该向上面那样,如果你没有用Redux ,只需要 export defuault injectIntl(App)
3.使用 intl 对象
我们通过第二步的注入,现在在我们在 组件的 props
上会得到一个 intl
对象,它提供的方法和咱们上边介绍的组件基本相对应,这时候我们想要显示字符串,可以使用formatMessage
方法:
const {intl} = this.props;
let tmp = intl.formatMessage({id: 'intl.name'},{name: 'joe'});
formatMessage的第一个参数可以传入Id, 第二个参数传入 values ,更详细的了解,请查看 API
结束语
教程的代码,我已放到github 上,大家如果需要,自行查看 React-intl
React-intl 实现多语言的更多相关文章
- react项目实现多语言切换
网站的语言切换功能大家都见过不少,一般都是一个下拉框选择语言,如果让我们想一下怎么实现这个功能,我相信大家都是有哥大概思路,一个语言切换的select,将当前的选择的语言存在全局,根据这个语言的key ...
- [React Intl] Use a react-intl Higher Order Component to format messages
In some cases, you might need to pass a string from your intl messages.js file as a prop to a compon ...
- [React Intl] Use Webpack to Conditionally Include an Intl Polyfill for Older Browsers
Some browsers, such as Safari < 10 & IE < 11, do not support the JavaScript Internationali ...
- [React Intl] Get locale value from intl injector
Get 'injectIntl' from 'react-intl', it is a high order componet. We need to wrap our component into ...
- [React Intl] Install and Configure the Entry Point of react-intl
We’ll install react-intl, then add it to the mounting point of our React app. Then, we’ll use react- ...
- [React Intl] Render Content Based on a Number using react-intl FormattedMessage (plural)
Using the react-intl FormattedMessage component, we’ll learn how to render content conditionally in ...
- [React Intl] Format Numbers with Separators and Currency Symbols using react-intl FormattedNumber
Using a react-intl FormattedNumber component, we'll pass a Number and a few additional props in orde ...
- [React Intl] Format a Date Relative to the Current Date Using react-intl FormattedRelative
Given a date, we’ll use the react-intl FormattedRelative component to render a date in a human reada ...
- [React Intl] Format Date and Time Using react-intl FormattedDate and FormattedTime
Using the react-intl FormattedDate and FormattedTime components, we’ll render a JavaScript Date into ...
- [React Intl] Render Content with Markup Using react-intl FormattedHTMLMessage
In this lesson, we’ll use the react-intl FormattedHTMLMessage component to display text with dynamic ...
随机推荐
- javascript(3)
使用javascript改进链接 摘自<javascript基础教程> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Trans ...
- jquery之选项卡效果
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...
- 301、302、200、206、304、404等HTTP状态引见(转载)
该文章来自网上转载,感谢他的辛勤付出! 如果向您的服务器发出了某项请求要求显示您网站上的某个网页,那么,您的服务器会返回 HTTP 状态代码以响应该请求. 一些常见的状态代码为: 200 - 服务器成 ...
- [转载] python利用psutil遍历进程名字和exe所在目录
本文转载自: http://www.duanzhihe.com/1594.html http://www.jianshu.com/p/64e265f663f6 import psutil,os,tim ...
- foreach笔记
结合泛型使用,不然就只能写成for(Object o : T). 缺点是没有下标,如下面代码 public class ForeachTest { public static void main(St ...
- MVC+Repository+UOW+EntityFrmeWork的使用
1.首先创建一个空的MVC3应用程序,命名为MyRepository.Web,解决方案命名为MyRepository. 2.添加一个类库项目,命名为MyRepository.DAL,添加一个文件夹命名 ...
- spring异常处理
http://cgs1999.iteye.com/blog/1547197 1 描述 在J2EE项目的开发中,不管是对底层的数据库操作过程,还是业务层的处理过程,还是控制层的处理过程,都不可避免会遇到 ...
- PHPCMS 详情页静态化
<?php defined('IN_PHPCMS') or exit('No permission resources.'); pc_base::load_app_class('admin',' ...
- vue.js学习笔记(二):如何加载本地json文件
在项目开发的过程中,因为无法和后台的数据做交互,所以我们可以自建一个假数据文件(如data.json)到项目文件夹中,这样我们就可以模仿后台的数据进行开发.但是,如何在一个vue.js 项目中引入本地 ...
- treegrid.bootstrap使用说明
treegrid.bootstrap使用说明 这个插件是用来做有层次的表格的,大概如图: 官网 http://maxazan.github.io/jquery-treegrid/ 使用这个控件之前需 ...