知乎专栏：zhuanlan.zhihu.com/c_215040065，个人博客：blog.caichengnan.com/
前言
国际化是一个很常见的需求，之前没有这方面的相关经验，所以决定练一下手。正好最近在写一个react骨架（新项目可直接移植的骨架），上网查了一下，常用的解决方案是yahoo的react-intl库，大致效果如下。
实现思路
-
首先解决静态国际化，即根据浏览器的语言，自动加载对应的语言模板。这里只需判断
navigator.language类型即可，然后通过react-intl提供了IntlProvider组件，加载组件属性的locale和messages，最后在需要用到国际化的组件里，引入FormattedMessage组件（react-intl内置），通过id映射到对应的国际化文件里的属性（例如下面的en_US.js的hello）。即可实现静态国际化。 -
动态国际化，即用户可以通过按钮切换，实现语言的切换。最容易想到的方案就是，在语言模板放在redux的store里，提供一个切换语言的action，改变store里的国家和语言模板，再触发对应的
FormattedMessage组件渲染。let's do it！
代码实现
- 在src下新建locale文件存放国际化语言的文件，这里我们新建了en_US.js和zh_CN.js。
en_US.js
const en_US = {hello: 'Hello, world!',name: 'my name is {name}'
}
export default en_US;
复制代码zh_CN.js
const zh_CN = {hello: '你好，世界！',name: '我的名字是 {name}'
}
export default zh_CN;
复制代码一个是常规的变量hello，一个是带有变量{name}的字段name。
- react-intl的
IntlProvider组件类似redux的Provider组件，需要在全局引入。所以我们封装一下Intl.jsx组件，将redux和IntlProvider相结合。
Intl.jsx
import React, { Component } from 'react';
import { addLocaleData, IntlProvider } from 'react-intl';
import { connect } from 'react-redux';
import zh_CN from './locale/lang/zh_CN';
import en_US from './locale/lang/en_US.js';
import zh from 'react-intl/locale-data/zh';
import en from 'react-intl/locale-data/en';addLocaleData([...zh,...en]);class Inter extends Component {render() {let { locale, localeMessage, children } = this.props;return (<IntlProvider key={locale} locale={locale} messages={localeMessage}>{children}</IntlProvider>)}
};function chooseLocale(val) {let _val = val || navigator.language.split('_')[0];switch (_val) {case 'en':return en_US;case 'zh':return zh_CN;default:return en_US;}
}const mapStateToProps = (state, ownProps) => ({locale: state.root.language,localeMessage: chooseLocale(state.root.language)
});let Intl = connect(mapStateToProps)(Inter);export default Intl;
复制代码解释一下这个组件，组件是将redux里的数据绑定到IntlProvider组件上，addLocaleData函数添加需要本地化的语言，这个需要声明。redux中传递两个props，locale代表当前语言，localeMessage代表locale里的语言文件内容。
这里有一个很关键的地方，即key属性。IntlProvider中的属性变更并不会触发FormattedMessage重新渲染，刚开始想要forceUpdate强制更新组件，后来上网查了一个解决方案，在组件中加入key，就能解决这个问题
- 在实际使用语言的组件中引入
FormattedMessage，当然react-intl还支持其他类型的转换组件，比如时间类型FormattedDate等等。可从官网上查询API。github
App.js
import React, { Component } from 'react';
import logo from './logo.svg';
import './App.css';
import { FormattedMessage } from 'react-intl';
import actions from '../actions/index.js';
import { connect } from 'react-redux';class App extends Component {changeLanguage() {let lang = this.props.locale;lang = lang === 'zh' ? 'en' : 'zh';this.props.changeLanguage(lang);}render() {const { locale } = this.props;return (<div className="App"><header className="App-header"><img src={logo} className="App-logo" alt="logo" /><h1 className="App-title"><FormattedMessageid="hello"/></h1></header><p className="App-intro"><FormattedMessageid="name"values={{ name: <b>{'carroll'}</b> }}/></p><button onClick={() => this.changeLanguage()}>{locale === 'zh' ? '切换英文' : 'change chinese'}</button></div>);}
}
const mapStateToProps = (state, ownProps) => ({locale: state.root.language,
});
const mapDispatchToProps = (dispatch, ownProps) => ({changeLanguage: (val) => dispatch(actions.changeLanguage(val))
});
export default connect(mapStateToProps,mapDispatchToProps
)(App);
复制代码App.js主要实现了两个功能，一个实现动态切换的action，一个FormattedMessageid与数据的绑定。
- 最后在根文件引入
Intl.jsx即可
// ... 省略前面的引入
ReactDOM.render(<Provider store={store}><Intl><App /></Intl></Provider>,document.getElementById('root'));
复制代码- 下面是github上的源码
github源码
总结
整体实现下来，动态的国际化切换也没有多难，但是我们要有思考。把国际化的数据放在redux中是否有些浪费，可否不引入FormattedMessage也能解决文字的切换，在IntlProvider上绑定key是否会造成其他无关组件的重新渲染。这些都是我们需要考虑的问题。
如果错误请指出，如果对您有帮助，麻烦点个赞