首页 >web前端 >js教程 >React-intl 实现多语言示例详解

React-intl 实现多语言示例详解

小云云原创: 2017-12-28 10:39:022742浏览

最近在项目中添加了语言国际化的功能。本文主要介绍了React-intl 实现多语言的示例代码，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧，希望能帮助到大家。

语言国际化，也有人说成是语言本地化，其实就是为Web App添加多语言，我们的项目当前包含了中文版和英文版，按理来说『逐字替换』也不是多大事儿，但是，这么Low的做法，有钱途吗？

一开始的时候，我考虑的是传统的为整个项目添加config文件，根据不同的语言和地区，加载不同的config文件，就能够达到界面语言切换的目的。当然，也正是因为这个想法太过于幼稚，所以才被称为『一开始』的想法。语言的国际化不仅仅是将界面上的UI文字翻译成另一种语言，还包括了日期&时间显示，数字显示（英文环境下每隔3位一个逗号：1,000），量词的显示（一个苹果是apple，两个苹果就应该是apples），甚至还有一个字符串中间插了一个变量的情况（"今天午饭吃了{count}个鸡腿"）...

所以这并不只是一个简单的字符替换问题，并且，我们要很方便的导出一个目录，放到word或者page当中，给到其他同事对照着进行翻译工作，这个非常重要！！难道你要让产品经理直接在代码里改么？或者你想一个一个搜索替换？不考虑清楚就干的话，相信我，You'll pay for this。

作为一个有追求的代码家，你肯定不希望在index.html当中增加一行2934a685527f5cd6bcb20a3dc28499e1引用吧？另外，UI中的文字全部都是使用图片的那个同学，请起立，滚。如果想要在一个React项目中，优雅的import something from somewhere，然后将界面中的文字用bbc9414ab2c0778d71a2a0b908a0de0a 组件替代，最后通过简单的配置实现语言的国际化，那我们就用React-intl吧。

React 做国际化，我推荐使用 React-intl , 这个库提供了 React 组件和Api两种方式来格式化日期，数字和字符串等。知道这个库了，那让我们开始使用它

组件用法

为了和React 比较融和，我们可以使用组件的方式

1.安装

npm install react-intl --save

2.添加引用

import {IntlProvider, addLocaleData} from &#39;react-intl&#39;;

3.添加 locale 配置文件

zh-CN.js

const zh_CN = { &#39;intl.hello&#39;: "你好", &#39;intl.name&#39;: &#39;我的名字是 {name}&#39; } export default zh_CN;

en-US.js

const en_US = { &#39;intl.hello&#39;: "hello", &#39;intl.name&#39;: &#39;my name is {name}&#39; } export default en_US;

4.使用1905fd125854d59ec1f7dec72e3298cf

这个组件用于设置 i18n 的上下文，它将包装应用程序的根组件，以便整个应用程序将配置在 i18n 的上下文中.
最主要的两个配置项是： loacle 当前的语言环境 messages 当前语言的内容。

我们要动态切换语言，需要动态改这两个配置。

import zhCN from &#39;./locale/zh.js&#39;;  //导入 i18n 配置文件
import enUS from &#39;./locale/en.js&#39;;

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=&#39;zh&#39; messages={zhCN}>
        <Provider store={store}>
          <Router history={history}>
          </Router>
        </Provider>
      </IntlProvider>
    )
  }
}

5.使用12e09664183759a27c35bf8019a3976f

基础用法

<FormattedMessage 
　　id="intl.hello"
　　defaultMessage={&#39;hello&#39;}
/>

如果当前语言环境是中文，它会显示你好，如果是英文环境，会显示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 &#39;react-intl&#39;;

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: &#39;intl.name&#39;},{name: &#39;joe&#39;});

formatMessage的第一个参数可以传入Id，第二个参数传入 values ，更详细的了解，请查看API

React-intl 实现多语言示例详解

相关文章