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

曾经终败给现在 2022-12-22 04:43 218阅读 0赞

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

![在这里插入图片描述][20201117164435664.png_pic_center]  
**然后在最根部的页面导入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()

**主要是以下两个地方：**

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM5ODk4MTkx_size_16_color_FFFFFF_t_70_pic_center]  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM5ODk4MTkx_size_16_color_FFFFFF_t_70_pic_center 1]

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

import {  injectIntl } from "react-intl";

![在这里插入图片描述][20201117164610673.png_pic_center]

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

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

![在这里插入图片描述][20201117164731951.png_pic_center]  
**injectIntl需要放在export的外层，格式参考上图**

## 四、使用 ##

**4.1函数组件**  
**需要把intl从props中获取出来**  
![在这里插入图片描述][20201117165024594.png_pic_center]  
![在这里插入图片描述][2020111716504546.png_pic_center]  
然后使用`intl.formatMessage({ id: 'oms.pipe.pressurePoint' })`就可以实现前端国际化

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

其中的键即为zh-CN中的键，如下示例：  
**zh-CN文件：**  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM5ODk4MTkx_size_16_color_FFFFFF_t_70_pic_center 2]  
![在这里插入图片描述][20201117165652976.png_pic_center]  
**4.2类组件**  
类组件使用injectIntl包裹之后直接使用`this.props.intl`从props取出来就可以了，如:  
![在这里插入图片描述][20201117170133632.png_pic_center]

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

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

[20201117164435664.png_pic_center]: /images/20221120/c21f7b796c8348c1acf3c85cd3128c5e.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM5ODk4MTkx_size_16_color_FFFFFF_t_70_pic_center]: /images/20221120/a0c5dc05b83e45fb807e6c7fa7e47591.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM5ODk4MTkx_size_16_color_FFFFFF_t_70_pic_center 1]: /images/20221120/57223b973355491bac0731b7a3d94c66.png
[20201117164610673.png_pic_center]: /images/20221120/b506be5a73074bee9aedbacfe5ecd554.png
[20201117164731951.png_pic_center]: /images/20221120/0bbab619e33b4b72b37dbdfe0229e2b7.png
[20201117165024594.png_pic_center]: /images/20221120/c16c90df278a49f888b3f5f473948417.png
[2020111716504546.png_pic_center]: /images/20221120/cbbe3b201e87470fa86f1464840defaf.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM5ODk4MTkx_size_16_color_FFFFFF_t_70_pic_center 2]: /images/20221120/663cb5f47f084299829cd810a5bf2ee5.png
[20201117165652976.png_pic_center]: /images/20221120/69bf09103ebe41d3b0d24388a7d34ca9.png
[20201117170133632.png_pic_center]: /images/20221120/c3a9c3ffbf90464abc3f4e92366e1614.png