02 基于umi搭建React快速开发框架(国际化) (2)

到此我们的系统国际化就可以用了。我们把登陆页面国际化完善起来。这要调用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。
我建了一个QQ群，大家加进来，可以一起交流。群号 787846148