react-i8n
1. 在项目中安装
npm install react-intl --save
2.兼容Safari各个版本需要安装intl
npm install intl --save
3.编写语言包
1.)新建 en_US.js
const = en_US = {
hello: "Hello world !",
superHello: "Hello, { someone } ! "
}
2.) 新建 zh_CN.js
const = en_US = {
hello: "你好 世界!",
superHello: "你好, { someone } ! "
}
4.在最外层的 index.js中修改
1.)引入文件
import { IntlProvider, addLocaleData } from 'react-intl';
import zh_CN from './translations/zh_CN'
import en_US from './translations/en_US'
2.)在render里添加标签
ReactDOM.render(
<IntlProvider
locale={'en'}
messages={'en_US'}
>
<App/>
</IntlProvider>, document.getElementById('root')
);
5.在任何组件内使用
1.)引入
import { FormattedMessage, FormattedDate, FormattedNumber } from 'react-intl';
2.)使用组件
<h3><FormattedNumber value={1000}/></h3>
<FormattedMessage id='hello' values={{someone:<b>{'增加的中文'}</b>}} description='say hello to Howard' defaultMessage='你好, Howard!' />
react-i8n的更多相关文章
- react组件的生命周期
写在前面: 阅读了多遍文章之后,自己总结了一个.一遍加强记忆,和日后回顾. 一.实例化(初始化) var Button = React.createClass({ getInitialState: f ...
- 十分钟介绍mobx与react
原文地址:https://mobxjs.github.io/mobx/getting-started.html 写在前面:本人英语水平有限,主要是写给自己看的,若有哪位同学看到了有问题的地方,请为我指 ...
- RxJS + Redux + React = Amazing!(译一)
今天,我将Youtube上的<RxJS + Redux + React = Amazing!>翻译(+机译)了下来,以供国内的同学学习,英文听力好的同学可以直接看原版视频: https:/ ...
- React 入门教程
React 起源于Facebook内部项目,是一个用来构建用户界面的 javascript 库,相当于MVC架构中的V层框架,与市面上其他框架不同的是,React 把每一个组件当成了一个状态机,组件内 ...
- 通往全栈工程师的捷径 —— react
腾讯Bugly特约作者: 左明 首先,我们来看看 React 在世界范围的热度趋势,下图是关键词“房价”和 “React” 在 Google Trends 上的搜索量对比,蓝色的是 React,红色的 ...
- 2017-1-5 天气雨 React 学习笔记
官方example 中basic-click-counter <script type="text/babel"> var Counter = React.create ...
- RxJS + Redux + React = Amazing!(译二)
今天,我将Youtube上的<RxJS + Redux + React = Amazing!>的后半部分翻译(+机译)了下来,以供国内的同学学习,英文听力好的同学可以直接看原版视频: ht ...
- React在开发中的常用结构以及功能详解
一.React什么算法,什么虚拟DOM,什么核心内容网上一大堆,请自行google. 但是能把算法说清楚,虚拟DOM说清楚的聊聊无几.对开发又没卵用,还不如来点干货看看咋用. 二.结构如下: impo ...
- React的使用与JSX的转换
前置技能:Chrome浏览器 一.拿糖:React的使用 React v0.14 RC 发布,主要更新项目: 两个包: React 和 React DOM DOM node refs 无状态的功能 ...
- Vue.js 2.0 和 React、Augular等其他框架的全方位对比
引言 这个页面无疑是最难编写的,但也是非常重要的.或许你遇到了一些问题并且先前用其他的框架解决了.来这里的目的是看看Vue是否有更好的解决方案.那么你就来对了. 客观来说,作为核心团队成员,显然我们会 ...
随机推荐
- 听说用 Lombok 可以早点下班?
听说隔壁用 Lombok 的六点就下班了,我也想六点下班! 好的,那么这篇文章就介绍下什么是 Lombok,Lombok 做了什么以及 Lombok 是怎么做的? 在介绍之前,先通过是否使用 Lomb ...
- AQS源码详细解读
AQS源码详细解读 目录 AQS源码详细解读 基础 CAS相关知识 通过标识位进行线程挂起的并发编程范式 MPSC队列的实现技巧 代码讲解 独占模式 独占模式下请求资源 独占模式下的释放资源 共享模式 ...
- npm git 常用命令行 记录
1. 推出node命令行: 两次ctrl+C或者一次ctrl+D 退出终端:exit; 2.npm 常用 npm install <name> 安装包 npm install &l ...
- effective-java学习笔记---使用标记接口定义类型40
标记接口(marker interface),不包含方法声明,只是指定(或“标记”)一个类实现了具有某些属性的接口. 例如,考虑 Serializable 接口.通过实现这个接口,一个类表明它的实例可 ...
- TensorFlow系列专题(五):BP算法原理
欢迎大家关注我们的网站和系列教程:http://www.tensorflownews.com/ ,学习更多的机器学习.深度学习的知识! 一.反向传播算法简介 二.前馈计算的过程 第一层隐藏层的计算 第 ...
- Oracle12C的卸载过程
1.找到自己的Oracle12C安装目录,一般的安装目录为D:\app\u01\product\12.1.0\dbhome_1\deinstall ,双击deintall.dat文件进行卸载. 2.耐 ...
- rabbitmq++:rabbitmq 三种常用的交换机
更多 rabbitmq 介绍 首先先介绍一个简单的一个消息推送到接收的流程,提供一个简单的图: 黄色的圈圈就是我们的消息推送服务,将消息推送到 中间方框里面也就是 rabbitMq的服务器: 然后经过 ...
- 大O 表示法
大O表示法 指出了算法有多快.例如,假设列表包含n个元素.简单查找需要检查每个元素,因此需要执行n次操作.使用大O表示法,这个运行时间为O(n).单位秒呢?没有——大O表示法指的并非以秒为单位的速度. ...
- iOS 内置图片瘦身
一.iOS 内置资源的集中方式 1.1 将图片存放在 bundle 这是一种很常见的方式,项目中各类文件分类放在各个 bundle 下,项目既整洁又能达到隔离资源的目的.采用 bundle 的加载方式 ...
- Oracle给权限和同义词
在同一个DB下,用户A创建了一个Table(student),用户B无法访问.如果B想要访问,就需要A赋予B权限. 登录用户A执行下面语句: GRANT SELECT, INSERT, UPDATE, ...