React-intl使用记录

使用 react-intl 实现 React 组件国际化

一、首先在项目中安装react-intl：

npm install react-intl --save

二、然后在项目最外层的app.jsx文件中添加以下内容：

// 多语言
import {ConfigProvider, message} from 'antd';
import {IntlProvider, addLocaleData} from 'react-intl';
import messages from './lang/index.js';

/*
*引入与navigator.languages[0]所对应的语言；
*如果没有引入对应的语言，会使用默认的“en”；
*导致FormattedMessage的映射不会成功；
*/
import zh from 'react-intl/locale-data/zh';
import en from 'react-intl/locale-data/en';

addLocaleData([...zh, ...en]);

// currentLang是全局变量，本项目中如下定义
// const currentLang = localStorage.getItem('et_lang') || 'zh-CN';

// ConfigProvider组件是配置antd组件使用多语言的
// IntlProvider组件包裹需要实现国际化的根组件，这个组件树之后就会在配置的i18n上下文中了。
render() {
    return (
      <ConfigProvider locale={messages[currentLang].antdLocal}>
        <IntlProvider locale={currentLang} messages={messages[currentLang].local}>
          <BrowserRouter>
            <Layout/>
          </BrowserRouter>
        </IntlProvider>
      </ConfigProvider>
    )
}

三、message文件的配置：

import zh_CN from './zh_CN'
import zh_MO from './zh_MO'
import en_US from './en_US'
import antdEN from 'antd/lib/locale-provider/en_US'
import antdTW from 'antd/lib/locale-provider/zh_TW'

const messages = {
  'zh-CN': {
    local: zh_CN,
    antdLocal: null
  },
  'zh-MO': {
    local: zh_MO,
    antdLocal: antdTW
  },
  'en-US': {
    local: en_US,
    antdLocal: antdEN
  },
};

export default messages;

四、zh_CN文件里面就可以编写自己项目中需要的多语言了：

// zh_CN 文件
const zh_CN = {
  'noData': '无数据'
}
export default zh_CN

// zh_MO 文件
const zh_MO = { 
  'noData': '無數據'
}
export default zh_MO 

// en_US 文件
const en_US = {
  'noData': 'No data.'
}
export default en_US 

五、然后就可以在自己的组件中使用多语言了：

import {injectIntl} from 'react-intl';

render() {
    const {intl} = this.props;
    return (
        <div>
         {intl.formatMessage({id: 'noData'})}
        </div>
    )
}

export default injectIntl(MyComp)

六、切换当前语言类型主要函数：

handleLang = (e) => {
    if (e.key !== currentLang) {
      window.location.reload();
      localStorage.setItem('et_lang', e.key);
    }
};