因为公司的项目都是需要多语言的，最近让我自己去开发一个新的项目，所以在这里记录一下怎么使用。
- 安装
npm install react-intl --save
-
安装完成之后需要在项目中新建一个存在多语言的文件夹，文件夹里面可以按照语言再进行分类，比如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)
}
- 然后再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>
)
}
