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是否有更好的解决方案.那么你就来对了. 客观来说,作为核心团队成员,显然我们会 ...
随机推荐
- Taro 和 uni-app选型对比
一.Taro和uni-app的介绍 1.taro的介绍 taro是多端统一开发框架,支持用 React 的开发方式编写一次代码,生成能运行在微信/百度/支付宝/字节跳动小程序.H5.React Nat ...
- 3.介绍ASP.NET Core框架
介绍ASP.NET Core框架 在这篇文章中,我将要向你们简短介绍一下ASP.NET Core 框架.当今社会,当提到软件开发,每个人都是讨论着开源以及跨平台开发.总所周知,微软是以它的基于Wind ...
- python中面向对象&装饰器
类的定义 基本形式: class ClassName(object): Statement 1.class定义类的关键字 2.ClassName类名,类名的每个单词的首字母大写. 3.object是父 ...
- coding++:Idea设置Java类注释模板和方法注释模板
设置类注释模板 1):选择File–>Settings–>Editor–>File and Code Templates–>Includes–>File Header. ...
- [教程]KALI LINUX 2.0 2019 更新国内源
2019年最新版本KALI 为 KALI 2019.1 下载地址:https://www.kali.org/downloads/ 有的新入门的朋友可能会问,为什么每次都无法手动更新 例如:Update ...
- CodeForces 6C(贪心 + 模拟)
题目链接 思路如下 贪心的思想,⚠️女士优先的策略,当它们吃掉之前的物品所用的时间相同的时候,此时女士先开始 继续吃 题解如下 #include<iostream> using names ...
- DevOps技能自查表
前篇提到了DevOps的工作岗位要求,但是没有来的及深入细节,本文根据个人10年多的经验,尽量详细地列举DevOps所需要用到的一些技术和相关参考网站. Linux基础 Linux系统的基本概念: 必 ...
- STM32F103ZET6 PWM输出
1.通用定时器的PWM功能 STM32F103ZET6有4个通用定时器,分别是TIM2.TIM3.TIM4.TIM5. 通用定时器由一个可编程预分频器驱动的16位自动装载计数器构成. 通用定时器的很多 ...
- 《Three.js 入门指南》2.4.1- 照相机 - 透视投影demo
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- Zabbix监控平台
Zabbix监控平台 案例1:常用系统监控命令 案例2:部署Zabbi ...