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]);
//根文件如下
 
     
       
         
            {params => (
              
                
{layout}
              
            )}
          
        
        }>{this.renderSettingDrawer()}
      
 

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

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

import {IntlProvider, FormattedMessage} from 'react-intl';


输出的结果：
Hello, Howard!

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

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

其中红框部分是换件代码

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