2019-02-28在用create-react-app搭建的框架中使用react-intl实现国际化

首先本项目用的antdUI框架，但是没有用LocaleProvider实现国际化，原因是LocaleProvider只实现组件内建文案，若有国际化业务需求，应该用react-intl

步骤：

1.npm instal react-intl

2.在项目根目录下新建locales文件夹，用于存放各种语言的映射关系，如下所示：

屏幕快照 2019-02-28 上午10.20.16.png

3.以zh-CN.js为例，展示具体的代码

屏幕快照 2019-02-28 上午10.22.40.png

其中‘app.setting.content-width’对应的是具体使用时的id

4.在页面根节点处通过IntlProvider注入语种以及所需要的映射文件，代码如下：

import {IntlProvider, addLocaleData} from 'react-intl';
import zh_CN from '../locales/zh-CN';
import * as en from 'react-intl/locale-data/en';
import * as fr from 'react-intl/locale-data/fr';
import * as zh from 'react-intl/locale-data/zh';
addLocaleData([...fr, ...en, ...zh]);
//根文件如下
 <IntlProvider locale={'zh'} messages={zh_CN}>
     <React.Fragment>
       <DocumentTitle title="Pandora">
         <ContainerQuery query={query}>
            {params => (
              <Context.Provider value={this.getContext()}>
                <div className={classNames(params)}>{layout}</div>
              </Context.Provider>
            )}
          </ContainerQuery>
        </DocumentTitle>
        <React.Suspense fallback={<PageLoading />}>{this.renderSettingDrawer()}</React.Suspense>
      </React.Fragment>
 </IntlProvider>

5.在具体某个页面中使用如下：

1.直接引用react-intl中的FormattedMessage方法，生成的是标签，这种适合标签，使用方法如下：

import {IntlProvider, FormattedMessage} from 'react-intl';
<FormattedMessage
    id='app.greeting'
    description='say hello to Howard'
    defaultMessage='Hello, Howard!'
 />

输出的结果：
<span>Hello, Howard!</span>

2.如果希望生成的是字符串，使用方法如下：会用react-intl中injectInl

屏幕快照 2019-02-28 上午10.48.10.png

其中红框部分是换件代码

附上参考链接：https://segmentfault.com/a/1190000005824920