前言
之前写过一篇关于React的国际化文章，主要是用react-intl库，雅虎开源的。react-intl是用高阶组件包装一层来做国际化。
基于组件化会有一些问题，比如在一些工具方法中需要国际化，就需要自己去实现了。在umi-react快速开发框架我们采用
react-intl-universal库来实现，不仅支持组件化调用，也支持动态调用，实现国际化。
react-intl-universal 用法
- 安装
```
npm install react-intl-universal --save
```
-
初始化
在以下示例中，我们intl使用app locale data（locales）初始化并确定动态使用哪个区域设置（currentLocale).
然后intl.get(...)用来获取国际化的消息import intl from 'react-intl-universal'; const locales = { "en-US": require('./locales/en-US.js'), "zh-CN": require('./locales/zh-CN.js'), }; class App extends Component { state = {initDone: false} componentDidMount() { this.loadLocales(); } loadLocales() { // init method will load CLDR locale data according to currentLocale // react-intl-universal is singleton, so you should init it only once in your app intl.init({ currentLocale: 'en-US', // TODO: determine locale here locales, }) .then(() => { // After loading CLDR locale data, start to render this.setState({initDone: true}); }); } render() { return ( this.state.initDone && <div> {intl.get('SIMPLE')} </div> ); } } -
调用
-
HTML Message (HTML 消息)
locale data:
{ "TIP": "This is <span style='color:red'>HTML</span>" }js code:
intl.getHTML('TIP'); -
Default Message (设置默认消息)
js code:intl.get('not-exist-key').defaultMessage('default message')也可以用简写设置默认值
intl.get('not-exist-key').d('default message')getHTML 也支持默认值
intl.getHTML('not-exist-key').d(<div>hello</div>) -
Message With Variables (消息添加变量)
locale data:
{ "HELLO": "Hello, {name}. Welcome to {where}!" }js code:
intl.get('HELLO', {name:'Tony', where:'Alibaba'})
-
在umi-react项目中加入国际化
-
在根目录新建locales文件夹， 添加locale描述文件
en_US.js 文件export default { user: { login: { loginBtn: 'login', placeholderName: 'Please input user name', placeholderPws: 'Please input password', forgetPwd: 'Forget password', remember: 'Remember me', }, logout: 'logout' } }
zh_CN.JS 文件
```
export default {
user: {
login: {
loginBtn: '登录',
placeholderName: '请输入用户名',
placeholderPws: '请输入密码',
forgetPwd: '忘记密码',
remember: '记住我',
},
logout: '退出登录'
}
}
```
-
在global modle中添加初始化state和Effect(changeLocale)和reducers(setLocale)
import intl from 'react-intl-universal'; import locales from '../locales'; import storage from 'utils/localStorage'; const defaultState = { currLocale: storage.get('locale') || 'zh_CN', localeLoad: false, } export default { namespace: 'global', state: defaultState, effects: { *changeLocale({ payload }, { call, put }) { const params = { currentLocale: payload, locales }; // 初始化国际化 yield intl.init(params); yield put({ type: 'setLocale', payload: { currLocale: payload, localeLoad: true, } }); // 把当前国际化持久化到 localstorage 中 storage.add('locale', payload); }, }, reducers: { setLocale(state, { payload }) { return { ...state, ...payload, }; }, }, }; -
在layouts index.js 中掉用changeLocale初始化国际化和antd组件国际化
import React, { Component } from 'react' import BaseLayout from './baseLayout'; import { LocaleProvider } from 'antd'; import { connect } from 'dva'; import zh_CN from 'antd/lib/locale-provider/zh_CN'; import en_US from 'antd/lib/locale-provider/en_US'; import { init } from './init'; @connect(({global}) => { return { currLocale: global.currLocale, localeLoad: global.localeLoad, } }) class Index extends Component { constructor() { super(); init(); this.state = { initDone: false, } } componentDidMount() { const {dispatch, currLocale} = this.props; // 更改国际化 dispatch({ type: 'global/changeLocale', payload: currLocale, }); } /** * 初始intl国际化和antd组件国际化 */ renderBody = () => { const {location: {pathname}, children, currLocale, localeLoad } = this.props; if (pathname === '/login') { return localeLoad && <React.Fragment> {children} </React.Fragment>; } return ( localeLoad && (<LocaleProvider locale={ currLocale === 'zh_CN' ? zh_CN : en_US }> <BaseLayout {...this.props} /> </LocaleProvider>) ); } render() { return ( <React.Fragment> {this.renderBody()} </React.Fragment> ) } } export default Index; -
在 src/baseLayout/header.js 添加更改国际化的 select
import React, { Component } from 'react'; import { Avatar, Dropdown, Menu, Icon, Select } from 'antd'; import { connect } from 'dva'; import intl from 'react-intl-universal'; import styles from './baseLayout.less'; const Option = Select.Option; @connect(({user}) => { return { user: user.user } }) class Header extends Component { /** * 切换语言 */ onLocaleChange = (value) => { this.props.dispatch({ type: 'global/changeLocale', payload: value, }) } render() { const {currLocale, user} = this.props; return ( <div className={styles.header}> <div className={styles.headerButton}> <Select defaultValue={currLocale} style={{ 100 }} onChange={this.onLocaleChange}> <Option value='zh_CN'>中文</Option> <Option value='en_US'>English</Option> </Select> </div> </div> ) } } export default Header; -
到此我们的系统国际化就可以用了。我们把登陆页面国际化完善起来。这要调用
intl.get方法import intl from 'react-intl-universal'; @connect(({user}) => ({ loginErr: user.loginErr, })) @Form.create() class Login extends React.Component { render() { const { loginErr, form:{ getFieldDecorator } } = this.props; const intlLogin = intl.get('user.login.loginBtn'); const intlUsername = intl.get('user.login.placeholderName'); const intlPwd = intl.get('user.login.placeholderPws'); const intlforgetPwd = intl.get('user.login.forgetPwd'); const intlRemember = intl.get('user.login.remember'); return ( <div className={styles.login}> { loginErr && <Alert style={{ marginBottom: '20px' }} message='用户名密码错误' type='error' showIcon />} <Form onSubmit={this.handleSubmit} className='login-form'> <FormItem> {getFieldDecorator('name', { rules: [ FormValid.require(intlUsername), ], })( <Input prefix={<Icon type='user' style={{ color: 'rgba(0,0,0,.25)' }} />} placeholder={intlUsername} /> )} </FormItem> <FormItem> {getFieldDecorator('password', { rules: [ FormValid.require(intlPwd), ], })( <Input prefix={<Icon type='lock' style={{ color: 'rgba(0,0,0,.25)' }} />} type='password' placeholder={intlPwd} /> )} </FormItem> <FormItem> {getFieldDecorator('remember', { valuePropName: 'checked', initialValue: true, })( <Checkbox>{intlRemember}</Checkbox> )} <a className='login-form-forgot' href=''>{intlforgetPwd}</a> <Button type='primary' htmlType='submit' className='login-form-button'> {intlLogin} </Button> </FormItem> </Form> </div> ); } } export default Login;
结束语
国际化已经完成, 代码已放到github上，大家可以自行查看umi-react。如果觉得不错，请 start 一下
我建了一个QQ群，大家加进来，可以一起交流。群号 787846148