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的更多相关文章

  1. react组件的生命周期

    写在前面: 阅读了多遍文章之后,自己总结了一个.一遍加强记忆,和日后回顾. 一.实例化(初始化) var Button = React.createClass({ getInitialState: f ...

  2. 十分钟介绍mobx与react

    原文地址:https://mobxjs.github.io/mobx/getting-started.html 写在前面:本人英语水平有限,主要是写给自己看的,若有哪位同学看到了有问题的地方,请为我指 ...

  3. RxJS + Redux + React = Amazing!(译一)

    今天,我将Youtube上的<RxJS + Redux + React = Amazing!>翻译(+机译)了下来,以供国内的同学学习,英文听力好的同学可以直接看原版视频: https:/ ...

  4. React 入门教程

    React 起源于Facebook内部项目,是一个用来构建用户界面的 javascript 库,相当于MVC架构中的V层框架,与市面上其他框架不同的是,React 把每一个组件当成了一个状态机,组件内 ...

  5. 通往全栈工程师的捷径 —— react

    腾讯Bugly特约作者: 左明 首先,我们来看看 React 在世界范围的热度趋势,下图是关键词“房价”和 “React” 在 Google Trends 上的搜索量对比,蓝色的是 React,红色的 ...

  6. 2017-1-5 天气雨 React 学习笔记

    官方example 中basic-click-counter <script type="text/babel"> var Counter = React.create ...

  7. RxJS + Redux + React = Amazing!(译二)

    今天,我将Youtube上的<RxJS + Redux + React = Amazing!>的后半部分翻译(+机译)了下来,以供国内的同学学习,英文听力好的同学可以直接看原版视频: ht ...

  8. React在开发中的常用结构以及功能详解

    一.React什么算法,什么虚拟DOM,什么核心内容网上一大堆,请自行google. 但是能把算法说清楚,虚拟DOM说清楚的聊聊无几.对开发又没卵用,还不如来点干货看看咋用. 二.结构如下: impo ...

  9. React的使用与JSX的转换

    前置技能:Chrome浏览器   一.拿糖:React的使用 React v0.14 RC 发布,主要更新项目: 两个包: React 和 React DOM DOM node refs 无状态的功能 ...

  10. Vue.js 2.0 和 React、Augular等其他框架的全方位对比

    引言 这个页面无疑是最难编写的,但也是非常重要的.或许你遇到了一些问题并且先前用其他的框架解决了.来这里的目的是看看Vue是否有更好的解决方案.那么你就来对了. 客观来说,作为核心团队成员,显然我们会 ...

随机推荐

  1. sql-lib闯关51-60

    第五十一关 这一关和三十八关基本一样 ,堆叠注入问题  只不过是字符型                  ?sort=1';create table test51 like users;%23 看数据 ...

  2. 一文带你入门Java Stream流,太强了

    两个星期以前,就有读者强烈要求我写一篇 Java Stream 流的文章,我说市面上不是已经有很多了吗,结果你猜他怎么说:"就想看你写的啊!"你看你看,多么苍白的喜欢啊.那就&qu ...

  3. OpenCV-Python 形态学转换 | 十七

    目标 在这一章当中, 我们将学习不同的形态学操作,例如侵蚀,膨胀,开运算,闭运算等. 我们将看到不同的功能,例如:cv.erode(),cv.dilate(), cv.morphologyEx()等. ...

  4. UVA11987 Almost Union-Find 并查集的节点删除

    题意: 第一行给出一个n,m,表示 n个集合,里面的元素为1~n,下面有m种操作,第一个数为 1 时,输入a,b 表示a,b 两个集合合并到一起,第一个数为 2 时,输入a,b表示将 a 从他原来的集 ...

  5. Servlet读取前端的request payload

    这几天遇见了一个很头疼的事,当我想用表单上传文件时,后端servlet读取不到文件的信息 网上搜索,说是要将form添加这个属性enctype="multipart/form-data&qu ...

  6. VBScript - 动态 Array 实现方法大全!

    记录一些方法,关于 VBScript 中,动态 Array 的实现 ,也适用于 VBA, 很久以前,写 VBA 的时候,就觉得使用 Array 很不方便,因为大小固定, 当时想的是,要是 Array ...

  7. [洛谷2671]求和<前缀和&模拟>

    题目链接:https://www.luogu.org/problemnew/show/P2671 这是noip2015普及组的第三题,谁说的普及组的题就一定水的不行,这道题就比较有意思的 这道题的暴力 ...

  8. JAVA研发面试题

    转自:http://www.jianshu.com/p/1f1d3193d9e3 Java基础的知识点推荐<Java编程思想>,JVM的推荐<深入理解Java虚拟机>,Spri ...

  9. MATLAB 概率论题

    1. 用模拟仿真的方法求解 clc clear tic n=0; N=100000; for ii=1:N b='MAXAM'; %字符串格式 a=randperm(5); % b=[b(a(1)), ...

  10. 作为 attribute 和 property 的 value 及 Vue.js 的相关处理

    attribute 和 property 是 Web 开发中,比较容易混淆的概念,而对于 value,因其特殊性,更易困惑,本文尝试做一下梳理和例证 attribute 和 property 的概念 ...