前言

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 实现多语言的更多相关文章

  1. react项目实现多语言切换

    网站的语言切换功能大家都见过不少,一般都是一个下拉框选择语言,如果让我们想一下怎么实现这个功能,我相信大家都是有哥大概思路,一个语言切换的select,将当前的选择的语言存在全局,根据这个语言的key ...

  2. [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 ...

  3. [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 ...

  4. [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 ...

  5. [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- ...

  6. [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 ...

  7. [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 ...

  8. [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 ...

  9. [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 ...

  10. [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 ...

随机推荐

  1. lpc1768的rit使用

    LPC1768在系统滴答定时器和通用定时器之外还引入了一个定时器,叫做重复定时器RIT,该定时器只能用于定时操作,带有一个中断,我个人的感觉,这似乎是为了延时函数设计的一个定时器 那么使用该定时器时遵 ...

  2. webstrom命令大全

    Ctrl + Space:Basic code completion (the name of any class, method or variable) 基本代码完成(任何类.函数或者变量名称), ...

  3. SpringMVC强大的数据绑定(2)——第六章 注解式控制器详解

    SpringMVC强大的数据绑定(2)——第六章 注解式控制器详解 博客分类: 跟开涛学SpringMVC   6.6.2.@RequestParam绑定单个请求参数值 @RequestParam用于 ...

  4. awk程序设计语言之-awk基础

    awk程序设计语言之-awk基础 http://man.linuxde.net/ 常用工具命令之awk命令 awk是一种编程语言,用于在Linux/Unix下对文本和数据处理.数据可以来自标准输入(s ...

  5. 【转载】Eclipse 断点调试

      作为开发人员,掌握开发环境下的调试技巧十分有必要.去年就想把关于Eclipse断点调试总结下了,由于对时间的掌控程度仍需极大提高,结果拖到今年才写了此篇博文.关于Java调试技术还有很多,如Jav ...

  6. DialogFragment学习笔记

    创建DialogFragment 跟通常的创建Fragment差不多,XML,继承DialogFragment,复写onCreateView() public View onCreateView(La ...

  7. 一些JSON 教程

    JSON  以下内容来自W3school. JSON:JavaScript 对象表示法(JavaScript Object Notation). JSON 是存储和交换文本信息的语法.类似 XML. ...

  8. poi2007

    序:为什么写poi,zy说poi都是思路题目,不像hnoi妈的数据结构队..... 1.bzoj1102 题目大意:定义了一个山谷和山峰,求他们数量. 题解:这种题bfs咯,在bfs的时候记录一下相邻 ...

  9. php在客户端禁用cookie时让session不失效的解决方法

    cookie固然好,不过有些客户端浏览器会禁用cookie,这就会导致你所依赖cookies的程序会失效或出错,那么若真出现用户关闭cookies的情况,PHP应该如何再次使用session?方法还是 ...

  10. SQL查询根节点

    /* 标题:查询指定节点及其所有父节点的函数 作者:爱新觉罗.毓华(十八年风雨,守得冰山雪莲花开) 时间:2008-05-12 地点:广东深圳 */ create table tb(id varcha ...