react-intl国际化使用方案

国际化介绍#

i18n：internationalization 国家化简称，首字母+首尾字母间隔的字母个数+尾字母，类似的还有 k8s(Kubernetes)
React-intl是 React 中最受欢迎的库。

使用步骤#

• 安装

  1
  # use npm
  2
  npm install react-intl -D
  3
  # use yarn

• 项目入口文件配置

  1
  import React from "react";
  2
  import ReactDOM from "react-dom";
  3
  import { IntlProvider } from "react-intl";
  4
  import App from "src/App";
  5
  import { getCurrentLang, getCurrentMessages } from "src/locales";
  6
  import "./styles/index.less";
  7
  
  8
  const root = (
  9
    <IntlProvider locale={getCurrentLang()} messages={getCurrentMessages()}>
  10
      <App />
  11
    </IntlProvider>
  12
  );
  13
  
  14
  ReactDOM.render(root, document.getElementById("root"));

  IntlProvider 有三个配置参数：

  • locale, <string>, 语言标记，例如 ‘zh-CN’ ‘en-US’
  • messages, <object>, 国际化所需的 key-value 对象
  • formats, <object>, 自定义 format，比如日期格式、货币等

• 在 src/locales 中创建国际化文件，一般有 en 和 zh，如

  1
  ├─src
  2
  │  ├─en
  3
  │  │  ├─index.ts
  4
  │  ├─zh
  5
  │  │  ├─index.ts
  6
  |  |——index.ts

  添加键值对并导出

  1
  export default {
  2
    whatever: `你好 {placeholder}`,
  3
  };

  1
  import zh from './zh';
  2
  import en from './en';
  3
  
  4
  import ls from 'src/utils/localStore';
  5
  import { createIntl, createIntlCache } from 'react-intl';
  6
  
  7
  const _currentLang = ls.getItem('qs_lang') || 'zh-CN';
  8
  const messages = {
  9
    'zh-CN': zh,
  10
    'en-US': en,
  11
  };
  12
  export const getCurrentLang = () => _currentLang;
  13
  export const getCurrentMessages = () => messages[_currentLang];
  14
  
  15
  const cache = createIntlCache();
  16
  const intl = createIntl(
  17
    {
  18
      locale: _currentLang,
  19
      messages: getCurrentMessages(),
  20
    },
  21
    cache
  22
  );
  23
  
  24
  export default intl;

  展开收起

• 接着在组件中就可以使用FormattedMessage等组件

  1
  import React from "react";
  2
  import { FormattedMessage } from "react-intl";
  3
  
  4
  const App = () => {
  5
    return (
  6
      <FormattedMessage
  7
        id="whatever"
  8
        description="hello world"
  9
        defaultMessage="Hello {placeholder}"
  10
        values={{ placeholder: "world" }}
  11
      />
  12
    );
  13
  };
  14
  
  15
  export default App;

  展开收起

  或者在函数式组件中使用 hooks

  1
  import { useIntl } from "react-intl";
  2
  
  3
  const App = () => {
  4
    const { formatMessage: f } = useIntl();
  5
    return (
  6
      <>
  7
        {f(
  8
          {
  9
            id: "whatever",
  10
            description: "hello world",
  11
            defaultMessage: "Hello {placeholder}",
  12
          },
  13
          { placeholder: "world" }
  14
        )}
  15
      </>
  16
    );
  17
  };
  18
  
  19
  export default App;

  展开收起
  • <FormattedMessage>组件中可以通过values属性来传值，如以上例子传递{placeholder: 'world'}，渲染到对应的你好 {placeholder}位置
  • formatMessage中传递第二个参数作为占位符的入参

如何在非组件中使用 react-intl#

例如我需要在组件目录下添加constants.ts文件来管理静态变量，而且需要国际化处理，因为它不是 react 组件，所以是没法用以上的方法处理。

这时候就需要使用createIntl来处理，createIntl 允许在不使用 Provider 的情况下创建 IntlShape 对象，它返回一个可以在 React 组件外部使用的对象。

1
import { createIntl, createIntlCache } from 'react-intl';
2
...
3
const cache = createIntlCache();
4
const intl = createIntl(
5
  {
6
    locale: _currentLang,
7
    messages: getCurrentMessages(),
8
  },
9
  cache
10
);
11

12
export default intl;

在非组件文件中使用时

1
import intl from "src/locales";
2

3
const a = intl.formatMessage(
4
  { id: "whatever", defaultMessage: "你好 {world}" },
5
  { placeholder: "world" }
6
);

更多#

react-intl还能处理像货币、时间、数字等等各种国际化问题，更多请参考官方文档

github上的demo

antd 国际化方案#

参考国际化

其实就是使用 React 的 context 特性，只需要一个 Provider Component，用它来提供国际化的上下文。

1
import zhCN from "antd/es/locale/zh_CN";
2

3
return (
4
  <ConfigProvider locale={zhCN}>
5
    <App />
6
  </ConfigProvider>
7
);

react-intl结合antd使用#

以上步骤完成后，在切换语言为英文时，react-intl中使用的国际化文案正常显示。但此时会发现antd中组件依然显示的是中文，因为此时我们还没有对antd组件的国际化进行处理。

1. 在src/locales中导出antd相关的国际化文案
2. 在入口文件index.tsx中antd全局配置组件中引入即可

1
import zh from './zh';
2
import en from './en';
3

4
import enUS from 'antd/es/locale/en_US';
5
import zhCN from 'antd/es/locale/zh_CN';
6
import ls from 'src/utils/localStore';
7
import { createIntl, createIntlCache } from 'react-intl';
8

9
const _currentLang = ls.getItem('qs_lang') || 'zh-CN';
10
export const getCurrLang = () => _currentLang;
11

12
const messages = {
13
  'zh-CN': zh,
14
  'en-US': en,
15
};
16

17
export const antMessages = {
18
  'zh-CN': zhCN,
19
  'en-US': enUS,
20
};
21

22
export const getAntMessages = () => antMessages[_currentLang];
23

24
export const getCurrentMessages = () => messages[_currentLang];
25
...

1
import React from "react";
2
import ReactDOM from "react-dom";
3
import { IntlProvider } from "react-intl";
4
import App from "src/App";
5
import { ConfigProvider } from "antd";
6
import { getCurrentLang, getCurrentMessages, getAntMessages } from "src/locales";
7
import "./styles/index.less";
8

9
const root = (
10
  <IntlProvider locale={getCurrentLang()} messages={getCurrentMessages()}>
11
    <ConfigProvider locale={getAntMessages()}>
12
        <App />
13
    </ConfigProvider>
14
  </IntlProvider>
15
);
16

17
ReactDOM.render(root, document.getElementById("root"));