react实现国际化

react实现国际化

静态国际化

---

首先解决静态国际化，即根据浏览器的语言，自动加载对应的语言模板。这里只需判断navigator.language类型即可，然后通过react-intl提供了IntlProvider组件，加载组件属性的locale和messages，最后在需要用到国际化的组件里，引入FormattedMessage组件（react-intl内置），通过id映射到对应的国际化文件里的属性（例如下面的en_US.js的hello）。即可实现静态国际化。

动态国际化

---

动态国际化，即用户可以通过按钮切换，实现语言的切换。最容易想到的方案就是，在语言模板放在redux的store里，提供一个切换语言的action，改变store里的国家和语言模板

实现思路

---

1. 下载react-intl 下载到生产环境
2. 在src下面设置文件夹language,里面放配置语言的文件

en-US文件

export default {
    'personage.personal_center': "personalCenter'",
    'personage.My_class': "MyClass",
    'personage.setting': 'Setting',
    'personage.log_out': 'logOut'
    
}

zh-CN 文件

export default {
    'personage.personal_