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

2020-06-10  本文已影响0人  心大的少年

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

  1. 安装
npm install react-intl --save
  1. 安装完成之后需要在项目中新建一个存在多语言的文件夹,文件夹里面可以按照语言再进行分类,比如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)
}

  1. 然后再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>
  )
}

上一篇下一篇

猜你喜欢

热点阅读