react-intl 实现 React 国际化多语言

效果预览

React Intl 国际化步骤

1. 建立国际化资源文件
2. 根据语言获取国际化资源
3. 引入 react-intl 的 local data
4. 建立 LocaleProvider 国际化上下文组件
5. 建立 react-intl 国际化上下文组件
6. 使用 react-intl's components & apis，进行国际化开发

1. 建立国际化资源文件

目前咱们管理资源文件的方式是在 src/locales 文件夹下：

.
├── en-US.js
├── en-US.messages.js
├── zh-Hans.js
└── zh-Hans.messages.js复制代码

*.messages.js 是咱们的资源文件(这里咱们采用了 js 格式，你也能够使用 json 等等)，返回的是一个对象，key 为咱们翻译用的 id，value 为具体语言的翻译，内容是：

export default {
  'page.localeProvider.react': '{ name }, a JavaScript library for building user interfaces.',
  'page.localeProvider.react.html': '<p>{ name } makes it painless to create interactive UIs. Design simple views for each state in your application, and { name } will efficiently update and render just the right components when your data changes.</p><p>Declarative views make your code more predictable and easier to debug.</p>',
  'page.localeProvider.unreadCount': 'You have {unreadCount} new {notifications}',
  'page.localeProvider.title.date': 'Current date: ',
  'page.localeProvider.title.time': 'Current time: ',
  'page.localeProvider.title.relative': 'Relative current time: ',
  'page.localeProvider.title.number': 'Comma number: ',
  'page.localeProvider.title.price': 'Price: ',
  'page.localeProvider.title.percent': 'Percent: ',
};复制代码

en-US.js 文件封装了 messages、locale 等国际化上下文组件须要的内容：

import appLocaleData from 'react-intl/locale-data/en';
// 引入组件多语言
import paginationLocale from '@/components/pagination/locales/en-US';
import messages from './en-US.messages';

window.appLocale = {
  // 合并全部 messages, 加入组件的 messages
  messages: Object.assign({}, messages, {
    Pagination: paginationLocale,
  }),

  // locale
  locale: 'en-US',

  // react-intl locale-data
  data: appLocaleData,

  // 自定义 formates
  formats: {
    date: {
      normal: {
        hour12: false,
        year: 'numeric',
        month: '2-digit',
        day: '2-digit',
        hour: '2-digit',
        minute: '2-digit',
      },
    },
    // 货币
    money: {
      currency: 'USD',
    },
  },
};

export default window.appLocale;复制代码

有了这些资源文件以及相关的封装以后，咱们就能够在 LocaleProvider 和 InltProvider 中使用了。

2. 根据语言加载国际化资源

上一步咱们建立了不一样语言版本的国际化资源文件，咱们还须要一个函数可以根据语言，加载对应的资源文件：

/** * 获取国际化资源文件 * * @param {any} lang * @returns */
function getLocale(lang) {
  let result = {};
  switch (lang) {
    case 'zh-CN':
      result = require('./locales/zh-Hans');
      break;
    case 'en-US':
      result = require('./locales/en-US');
      break;
    default:
      result = require('./locales/zh-Hans');
  }

  return result.default || result;
}复制代码

3. 引入 react-intl 的 local data

import { addLocaleData } from 'react-intl';
...

render() {
  const appLocale = getLocale('en-US');
  addLocaleData(...appLocale.data);
  ...
}复制代码

react-intl 在作国际化的时候须要一些特有的 local data，主要是进行相对时间翻译时，好比昨天、今天、明天、几分钟前、几个月前之类的。
咱们经过 addLocaleData 这个方法加载相关内容，你们能够根据实际状况加载须要的 locale-data。

4. 建立 LocaleProvider 国际化上下文组件

为了组件可以国际化资源信息，咱们须要一个 LocaleProvider 组件，用它来提供国际化的上下文，具体用法：

export default class LocaleProvider extends React.Component {
  static propTypes = {
    children: PropTypes.any,
    locale: PropTypes.object,
  };

  static childContextTypes = {
    // 语言信息
    locale: PropTypes.object,
  };

  getChildContext() {
    return {
      locale: {
        ...this.props.locale,
      },
    };
  }

  render() {
    return React.Children.only(this.props.children);
  }
}复制代码

5. 建立 react-intl 国际化上下文组件

为了可以使用 react-intl 进行国际化，跟 redux 这些框架同样，咱们须要一个 Provider Component，用它来提供国际化的上下文，具体用法：

...
import { addLocaleData, IntlProvider } from 'react-intl';
import LocaleProvider from '@/components/locale-provider';
import Home from '@/views/home';
...

render() {
  // 根据语言获取国际化资源
  const appLocale = getLocale('en-US');
  addLocaleData(...appLocale.data);

  return (
    <LocaleProvider locale={appLocale}> <IntlProvider locale={appLocale.locale} messages={appLocale.messages} formats={appLocale.formats} > <Home /> </IntlProvider> </LocaleProvider>
  );
}复制代码

LocaleProvider 有三个配置参数：
  locale, <object>, 国际化资源.

IntlProvider 有三个配置参数：
  locale, <string>, 语言标记，例如 'zh-CN' 'en-US'
  messages, <object>, 国际化所需的 key-value 对象
  formats, <object>, 自定义 format，好比日期格式、货币等复制代码

在定义好 IntlProvider 以后，咱们就能够在页面使用它提供的 api 或者组件来进行国际化了。

6. 使用 react-intl's components & apis

react-intl 提供了丰富的组件和 api 来完成页面部分的国际化。

字符串的格式化

a. <FormattedMessage /> 这个组件用于格式化字符串，是全部的组件中使用频率最高的组件。除了能够根据配置输出不一样语言的简单字符串以外，还能够输出包含动态变化的参数的复杂字符串，具体的用法在后面的例子中会慢慢叙述。

好比咱们在 *.message.js 配置文件中写了以下内容：

export default {
  'page.localeProvider.react': '{ name }, a JavaScript library for building user interfaces.',
};复制代码

使用这个组件的时候，咱们这么写：

<FormattedMessage
  tagName="p"
  id="page.localeProvider.react"
  values={{
    name: 'React',
  }}
  defaultMessage="{name} 是一个用于构建用户界面的 JAVASCRIPT 库。"
  description="{name} 是什么？"
/>复制代码

• id 指代的是这个字符串在配置文件中的属性名
• description 指的是对于这个位置替代的字符串的描述，便于维护代码，不写的话也不会影响输出的结果
• defaultMessage 当在locale配置文件中没有找到这个id的时候，输出的默认值
• tagName 实际生成的标签，默认是 span
• values 动态参数. 格式为对象

输出的结果：

<p>React, a JavaScript library for building user interfaces.</p>复制代码

b. <FormattedHTMLMessage /> 这个组件的用法和彻底相同，惟一的不一样就是输出的字符串能够包含HTML标签。

日期时间

a. <FormattedDate /> 用于格式化日期，可以将一个时间戳格式化成不一样语言中的日期格式。

传入时间戳做为参数：

<FormattedDate 
  value={new Date(1459832991883)}
/>复制代码

输出结果：

<!-- 英文 -->
<span>4/5/2016</span>

<!-- 中文 -->
<span>2016/5/4</span>复制代码

b. <FormattedTime> 用于格式化时间，效果与<FormattedDate />类似。

传入时间戳做为参数：

<FormattedTime 
  value={new Date(1459832991883)}
/>复制代码

输出结果：

<!-- 英文 -->
<span>1:09 AM</span>

<!-- 中文 -->
<span>上午1:09</span>复制代码

c. <FormattedRelative /> 经过这个组件能够显示传入组件的某个时间戳和当前时间的关系，好比“10 minutes ago”。

传入时间戳做为参数：

<FormattedRelative 
  value={Date.now()}
/>复制代码

输出结果:

<!-- 英文 =>> 运行时的输出结果： -->
<span>now</span>

<!-- 英文 =>> 10秒以后的输出结果： -->
<span>10 seconds ago</span>

<!-- 英文 =>> 1分钟以后的输出结果： -->
<span>1 minute ago</span>

<!-- 中文 =>> 运行时的输出结果： -->
<span>如今</span>

<!-- 中文 =>> 10秒以后的输出结果： -->
<span>10秒前</span>

<!-- 中文 =>> 1分钟以后的输出结果： -->
<span>1分钟前</span>复制代码

数字量词

a. <FormattedPlural /> 这个组件可用于格式化量词，在中文的语境中，其实不太会用获得，好比咱们说一个鸡腿，那么量词就是‘个’，咱们说两个鸡腿，量词仍是‘个’，不会发生变化。可是在英文的语言环境中，描述一个苹果的时候，量词是apple，当苹果数量为两个时，就会变成apples，这个组件的做用就在于此。

传入组件的参数中，value为数量，其余的为不一样数量时对应的量词，在下面的例子中，一个的时候量词为message，两个的时候量词为messages。实际上能够传入组件的量词包括 zero, one, two, few, many, other 已经涵盖了全部的状况。

结合 <FormattedMessage />运用：

const unreadCount = 10;
const unreadCount2 = 1;
... 

<p>
  <FormattedMessage
    id="page.localeProvider.unreadCount"
    defaultMessage={'你有{ unreadCount }条新信息'}
    values={{
      unreadCount: (
        <strong
          style={{
            color: '#f30',
            fontWeight: 'normal',
          }}
        >
          <FormattedNumber
            value={unreadCount}
          />
        </strong>
      ),
      notifications: (
        <FormattedPlural
          value={unreadCount}
          one="notification"
          other="notifications"
        />
      ),
    }}
  />
</p>
<p>
  <FormattedMessage
    id="page.localeProvider.unreadCount"
    defaultMessage={'你有{ unreadCount2 }条新信息'}
    values={{
      unreadCount: (
        <strong
          style={{
            color: '#f30',
            fontWeight: 'normal',
          }}
        >
          <FormattedNumber
            value={unreadCount2}
          />
        </strong>
      ),
      notifications: (
        <FormattedPlural
          value={unreadCount2}
          one="notification"
          other="notifications"
        />
      ),
    }}
  />
</p>复制代码

输出结果：

<!-- 英文 -->
<p>You have 10 new notifications</p>
<p>You have 1 notification</p>

<!-- 中文 -->
<p>你有10条新信息</p>
<p>你有1条新信息</p>复制代码

b. <FormattedNumber /> 这个组件最主要的用途是用来给一串数字标逗号，好比10000这个数字，在中文的语言环境中应该是1,0000，是每隔4位加一个逗号，而在英语的环境中是10,000，每隔3位加一个逗号。

传入数字做为参数：

<FormattedNumber 
  value={1000}
/>复制代码

输出结果：

<span>1,000</span>复制代码

<FormattedNumber /> 输出百分比

传入小数做为参数：

<FormattedNumber
  value={0.5}
  style="percent"
/>复制代码

输出结果：

<span>50%</span>复制代码

<FormattedNumber /> 输出货币

传入数字做为参数：

// locale.formats.money.currency 是 /locales/*.js 国际化资源配置的货币信息。中文: 'CNY'; 英文: 'USD'

<FormattedNumber
  value={123456.78}
  style="currency"
  currency={locale.formats.money.currency}
/>复制代码

输出结果：

<!-- 英文 -->
<span>$123,456.78</span>

<!-- 中文 -->
<span>￥123,456.78</span>复制代码

注：项目在中文状况下也是每隔3位加一个逗号，具体缘由详，若是有知道缘由的请告知。

组件国际化

1. 建立获取上下文国际化资源函数

/** * 获取 组件的语言配置 * * @param {any} props 属性 * @param {any} context 上下文 * @param {any} componentName 组件名. 对应 context.locale.messages 中的 key 值 * @param {any} getDefaultLocale */
function getComponentLocale(props, context, componentName, getDefaultLocale) {
  let locale = {};

  // 若是 context 上下文中有多语言配置. 则取 context 上下文中的多语言值.
  // 不然, 取默认值的多语言值.
  if (context && context.locale && context.locale.messages[componentName]) {
    locale = context.locale.messages[componentName];
  } else {
    const defaultLocale = getDefaultLocale();
    locale = defaultLocale.default || defaultLocale;
  }

  let result = {
    ...locale,
  };

  // 若是属性有语言配置项, 则合并.
  if (props.locale) {
    result = {
      ...result,
      ...props.locale,
    };

    if (props.locale.lang) {
      result.lang = {
        ...locale.lang,
        ...props.locale.lang,
      };
    }
  }

  return result;
}复制代码

2. 建立国际化的组件

...
import { getComponentLocale } from '../_utils/getLocale';
...

export default class Pagination extends React.Component {
  // context 上下文
  static contextTypes = {
    locale: PropTypes.object,
  };

  render() {
    const currentlocale = getComponentLocale(this.props, this.context, 'Pagination', () => {
      require('./locales/zh-CN');
    });

    return (
      <div className="pagination"> <div className="pagination__wrapper"> <div className="pagination__button__prev"> <a>{currentlocale.prevText}</a> </div> <div className="pagination__button__next"> <a>{currentlocale.nextText}</a> </div> </div> </div>
    );
  }
}复制代码

国际化规范附录

React Intl 编写规范

1. 必须填写 defaultMessage，并将 defaultMessage 做为中文翻译
2. id 不得重复
3. 在使用 intl.formatMessage() 时，必须使用 defineMessages，预约义消息

源码

整个项目源码

资料

• API
• 国际化方案
• Intl.NumberFormat