React 国际化
前言
React 做国际化,我推荐使用 React-intl , 这个库提供了 React 组件和Api两种方式来格式化日期,数字和字符串等。知道这个库了,那让我们开始使用它
组件用法
为了和React 比较融和,我们可以使用组件的方式
安装
npm install react-intl --save
添加引用
import {IntlProvider, addLocaleData} from 'react-intl';
添加 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](https://github.com/yahoo/react-intl/wiki/API),如有不明白的地方,我可以留言。
API用法
有时候我们可能需要在代码中动态做 国际化,这就需要动态API 了。下面我简单介绍下怎么用
导入
injectIntl
import { injectIntl, FormattedMessage } from 'react-intl'
;
在组件中注入
export default connect(mapStateToProps,mapActionCreators)(injectIntl(App))
我在项目中用到了Redux,注入的时候应该向上面那样,如果你没有用Redux ,只需要export defuault injectIntl(App)
使用 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 国际化的更多相关文章
- react-intl 实现 React 国际化多语言
效果预览 React Intl 国际化步骤 创建国际化资源文件 根据语言获取国际化资源 引入 react-intl 的 local data 创建 LocaleProvider 国际化上下文组件 创建 ...
- [React] react-interview-01
1.render 函数中 return 如果没有使用()会有什么问题? 我们在使用 JSX 语法书写 react 代码时,babel 会将 JSX 语法编译成 js,同时会在每行自动添加分号(:),如 ...
- react第三方库
作者:慕课网链接:https://www.zhihu.com/question/59073695/answer/1071631250来源:知乎著作权归作者所有.商业转载请联系作者获得授权,非商业转载请 ...
- 02 基于umi搭建React快速开发框架(国际化)
前言 之前写过一篇关于React的国际化文章,主要是用react-intl库,雅虎开源的.react-intl是用高阶组件包装一层来做国际化. 基于组件化会有一些问题,比如在一些工具方法中需要国际化, ...
- jquery/vue/react前端多语言国际化翻译方案指南
❝ 本文章共3470字,预计阅读时间5-10分钟. ❞ 国际化-前言 每个开发者能希望编写的程序可以让全世界的用户使用,它要求从产品中抽离所有地域语言,国家/地区和文化相关的元素.换种说法,「应用程序 ...
- 前端系列——jquery前端国际化解决方案“填坑日记”
前言:最近,新的平台还没有开发完成,原来的老项目又提出了新的需求:系统国际化.如果是前后端完全分离的开发模式,要做国际化,真的太简单了,有现成的解决方案,基于Node构建的时下热门的任何一种技术选型都 ...
- react native 常用组件汇总
react-native-uploader //文件上传https://github.com/aroth/react-native-uploader jpush-react-native //官方版本 ...
- React项目模板-从项目搭建到部署
前一段时间做了一个小项目,时间比较紧,就一个人月.最终希望能够通过微信公众号链接启动应用. 项目的业务细节就不多说了,主要是想分享一下做这个项目技术方面的一些经验. 技术选型 参考范围大致三种:Ang ...
- 使用新一代js模板引擎NornJ提升React.js开发体验
当前的前端世界中有很多著名的开源javascript模板引擎如Handlebars.Nunjucks.EJS等等,相信很多人对它们都并不陌生. js模板引擎的现状 通常来讲,这些js模板引擎项目都有一 ...
随机推荐
- 如何针对已经安装好的Apache/PHP/Mysql/Nginx程序查看他们的编译参数
我们经常要对我们已经安装好的程序进行查看他当时的一些编译参数,特别是针对要安装多台服务器来说,而且要保证其他服务器上的软件版本和安装参数必须一致时,这种查看就是很有必要的了.具体查看各程序的编译参数命 ...
- IdTCP的C++Builder2010示例(转)
源:IdTCP的C++Builder2010示例 IdTCP的C++Builder2010示例 这个是服务端的: void __fastcall TTCPDataServer::TCPServerEx ...
- 2.4 easyui - panel的使用
<div id="p" class="easyui-panel" title="My Panel" style ...
- php传输大数据大文件时候php.ini相关设置
post_max_size which is directly related to the POST size---针对采用post上传的,大文件,此项为关键 upload_max_filesize ...
- C#调用bat 不显示DOS窗口,禁止DOS窗口一闪而过
ProcessStartInfo startInfo = new ProcessStartInfo(); startInfo.CreateNoWindow = true;//不创建窗口
- Map笔记
Map,是一个接口,是以键值对的方式存储的,并且键是无序且不可重复的.Map和Collection没有什么关系,Map是一对一对的存,而Collection是一个一个的存. 下面有一个子接口:Sort ...
- github 创建新项目
二.GitHub简介 GitHub 可以托管各种Git版本库,并提供一个web界面,但与其它像 SourceForge或Google Code这样的服务不同,GitHub的独特卖点在于从另外一个项目进 ...
- Swift分割字符串
var str_componets = "I Like Swift " str_componets.componentsSeparatedByString(" " ...
- dubbo框架揭秘之服务引用
ApplicationConfig config = new ApplicationConfig("hello-worldp"); RegistryConfig reg = new ...
- freemarker配置,使用
最近在项目中用到freemarker,总是报一些莫名其妙的错误. 调查得知是由于在配置文件中属性[tag_syntax]的设置问题,我们的环境下该属性(auto_detect)默认设置了自动检测,也就 ...