使用react-intl，antd前端函数组件国际化实现

一、首先，添加dependencies，我使用的版本是react-intl 2.4.0

然后在最根部的页面导入react-intl

import { IntlProvider, addLocaleData } from 'react-intl'

以下是我项目的根部index.tsx文件，仅供参考

import React from 'react'
import ReactDOM from 'react-dom'
import localZh from './locales/zh-CN'
import localEn from './locales/en-US'
import { IntlProvider, addLocaleData } from 'react-intl'
import * as serviceWorker from './serviceWorker'
import { ConfigProvider } from 'are-common'
import App from './App'
import {
  THEME_MODE_LIGHT,
  LOCAL_THEME_MODE_KEY,
  bindAppOnMessage,
  unbindAppOnMessage
} from 'are-common/lib/utils/themeWorkflow'

import './index.less'

const { enUS, zhCN } = ConfigProvider.locale

const lang = localStorage.getItem('umi_locale') || 'zh-CN'
let locale = localZh,
  antdLocale = zhCN
if (lang === 'zh-CN') {
  locale = localZh
  antdLocale = zhCN
} else if (lang === 'en-US') {
  locale = localEn
  antdLocale = enUS
}
addLocaleData(locale.data)

interface RootState {
  appAreConfigs: object
}

class Root extends React.Component<{}, RootState> {
  state = {
    appAreConfigs: {
      themeMode: localStorage.getItem(LOCAL_THEME_MODE_KEY) || THEME_MODE_LIGHT,
      localeValue: lang
    }
  }

  componentDidMount(): void {
    bindAppOnMessage(this.onMessageHandler)
  }

  componentWillUnmount(): void {
    unbindAppOnMessage(this.onMessageHandler)
  }

  private onMessageHandler = (themeMode: string): void => {
    this.setState((prevState) => ({
      appAreConfigs: {
        ...prevState.appAreConfigs,
        themeMode
      }
    }))
  }

  render(): JSX.Element {
    const { appAreConfigs } = this.state
    return (
      <IntlProvider locale={locale.locale} messages={locale.messages}>
        <ConfigProvider locale={antdLocale} areconfigs={appAreConfigs}>
          <App />
        </ConfigProvider>
      </IntlProvider>
    )
  }
}

ReactDOM.render(<Root />, document.getElementById('root') as HTMLElement)

// If you want your app to work offline and load faster, you can change
// unregister() to register() below. Note this comes with some pitfalls.
// Learn more about service workers: https://bit.ly/CRA-PWA
serviceWorker.unregister()

主要是以下两个地方：

二、在需要使用国际化的组件中导入 injectIntl

import { injectIntl } from "react-intl";

三、export的时候使用injectIntl将组件进行包裹

export default injectIntl(Form.create<CreateFormProps>()(connect(mapStateToProps)(TableList)))

injectIntl需要放在export的外层，格式参考上图

四、使用

4.1函数组件
需要把intl从props中获取出来


然后使用intl.formatMessage({ id: 'oms.pipe.pressurePoint' })就可以实现前端国际化

intl.formatMessage({ id: '键' })

其中的键即为zh-CN中的键，如下示例：
zh-CN文件：


4.2类组件
类组件使用injectIntl包裹之后直接使用this.props.intl从props取出来就可以了，如:

this.props.intl.formatMessage({ id: `menu.${item.title}` })

参数和函数组件导入injectIntl以及使用injectIntl包裹方式是一样的，只是取的方式不同。