如何使用react-intl实现多语言化

因为公司的项目都是需要多语言的，最近让我自己去开发一个新的项目，所以在这里记录一下怎么使用。

1. 安装

npm install react-intl --save

2. 安装完成之后需要在项目中新建一个存在多语言的文件夹，文件夹里面可以按照语言再进行分类，比如en,zh等

   
   文件夹分类
   

   可以按照页面来写不同的json或者js文件，这样比较清晰，后期想要更改也比较好找
   可以再local文件夹下的index.js里面将所有的翻译文件引入进来

   
   en和zh文件夹下的index.js
   local文件夹下的index.js

import en from './en';
import zh from './zh';

const formatLanguagePackage = (data) => { // 用来将json转化成a.b.c这种对象
  const currentData = {}
  const destructionObject = (prefix, obj) => {
    for (const key in obj) {
      if (obj.hasOwnProperty(key)) {
        const value = obj[key]
        if (typeof value === 'string') {
          currentData[`${prefix}${key}`] = value
        } else if (typeof value === 'object') destructionObject(`${prefix}${key}.`, value)
      }
    }
  }
  destructionObject('', data)
  return currentData
}

export default {
  en: formatLanguagePackage(en),
  zh: formatLanguagePackage(zh)
}

3. 然后再App.js中引入翻译文件和IntlProvider，用IntlProvider包裹住App.js

import { IntlProvider } from 'react-intl';
import language from './local';

// 需要注意的是en,zh等都是通用的，并不是自己随便定义的
function App() {
  const [lan, setLan] = useState('en')
  return (
    <IntlProvider locale={lan} messages={language[lan]}>
      <span><FormattedMessage id='app'/></span>
      <button onClick={() => {
        setLan('zh');
      }}>switch language</button>
    </IntlProvider>
  )
}