官网文档：https://pro.ant.design/docs/i18n-cn
使用
- 先配置。
可以配置在 src/locales/ 中，也可以配置在各自的组件目录中。
比如，新建了一个模块 TestForm, locales 就可以放在这里边。个人觉得，各个模块的 locales 放在各自的目录下表好。包括 model service 这些。
# locales/zh-CN.ts
export default {
'login.formlogin.login': '登录',
'login.formlogin.register': '注册',
'login.formlogin.account': '账号',
'login.formlogin.account-placeholder': '请输入账号',
}
# locales/zh-TW.ts
export default {
'login.formlogin.login': '登錄',
'login.formlogin.register': '註冊',
'login.formlogin.account': '賬號',
'login.formlogin.account-placeholder': '请输入賬號',
}
- 再使用。
# 使用 FormattedMessage 或 使用 formatMessage
import { FormattedMessage, formatMessage } from "umi";
<Form.Item label={<FormattedMessage
id="login.formlogin.account" />}
rules={[{ required: true, message: formatMessage({id:'login.formlogin.account-placeholder'}) }]}>
<Input placeholder={formatMessage({id:'login.formlogin.account-placeholde'})}/>
</Form.Item>
不过，使用 formatMessage 的时候，会报下边的警告。
Warning: Using this API will cause automatic refresh when switching languages, please use useIntl or injectIntl.
使用此 api 会造成切换语言的时候无法自动刷新，请使用 useIntl 或 injectIntl。
可是对 placeholder 如果不使用 formatMessage 又不行。真为难。
下边一个简单的 login 的列子
不喜欢官方的登录注册页，不仅繁琐，还不好看。
index.tsx
import { connect } from 'umi';
import { ConnectState } from '@/models/connect';
import FormLogin from './FormLogin';
const Login = () => {
const onLoginSubmit = (value:any) => {
console.log(value);
}
return (
<FormLogin onLoginSubmit={onLoginSubmit} ></FormLogin>
);
};
export default connect(({ login, loading }: ConnectState) => ({
userLogin: login,
submitting: loading.effects['login/login'],
}))(Login);
locales/zh-CN.ts
export default {
'login.formlogin.login': '登录',
'login.formlogin.register': '注册',
'login.formlogin.account': '账号',
'login.formlogin.account-placeholder': '请输入账号',
'login.formlogin.account-rule': '请输入正确的账号格式（手机号码）',
'login.formlogin.password': '密码',
'login.formlogin.password-placeholder': '请输入密码',
'login.formlogin.password-rule': '密码不能为空',
'login.formlogin.remember-password': '记住密码',
'login.formlogin.forget-password': '忘记密码',
'login.formlogin.none-account': '如果没有账号，请',
}
FormLogin/index.tsx
import React from "react";
import styles from "./index.less";
import { FormattedMessage, formatMessage } from "umi";
import { Card, Form, Input, Button, Checkbox } from "antd";
const itemLayout = {
labelCol: {
xs: { span: 24 },
sm: { span: 6 },
},
wrapperCol: {
xs: { span: 24 },
sm: { span: 12 },
},
};
const tailLayout = {
wrapperCol: {
xs: { span: 24 },
sm: { offset:6, span: 12 }
},
};
const NormalLoginForm = (props:any) => {
return (
<Card bordered={false} title={<FormattedMessage id='login.formlogin.login' />} style={{ width: 720 }}>
<Form
{...itemLayout}
initialValues={{ remember: true }}
onFinish={props.onLoginSubmit}
>
<Form.Item name="account" label={<FormattedMessage id='login.formlogin.account' />} rules={[{ required: true, pattern: /^1[3456789]\d{9}$/ , message: <FormattedMessage id='login.formlogin.account-rule' /> }]}>
<Input placeholder={ formatMessage({ id: 'login.formlogin.account-placeholder' })} />
</Form.Item>
<Form.Item name="password" label={<FormattedMessage id="login.formlogin.password" />} rules={[{ required: true, message: <FormattedMessage id='login.formlogin.password-rule' /> }]}>
<Input.Password placeholder={formatMessage({ id: 'login.formlogin.password-placeholder' })} />
</Form.Item>
<Form.Item {...tailLayout} name="remember" valuePropName="checked">
<Checkbox>
<FormattedMessage id="login.formlogin.remember-password" />
</Checkbox>
</Form.Item>
<Form.Item {...tailLayout}>
<Button type="primary" htmlType="submit">
<FormattedMessage id='login.formlogin.login' />
</Button>
<Button type="link" href="https://baidu.com" target="_blank">
<FormattedMessage id='login.formlogin.forget-password' />
</Button>
</Form.Item>
<Form.Item {...tailLayout} className="other-way">
<span><FormattedMessage id='login.formlogin.none-account' /></span>
<Button type="link" href="https://baidu.com" size="small">
<FormattedMessage id='login.formlogin.register' />
</Button>
</Form.Item>
</Form>
</Card>
);
};
export default (props:any) => (
<div className={styles.container}>
<div id="form-login">
<NormalLoginForm onLoginSubmit={props.onLoginSubmit} />
</div>
</div>
);
FormLogin/index.less
.container {
height: 100%;
:global {
#form-login {
display: flex;
flex-direction: row;
justify-content: center;
align-items: center;
width: 100%;
height: 100%;
background-color: rgba(255,0,0,0.1);
.login-form {
width: 100%;
max-width: 720px;
}
}
.other-way {
margin-top: 20px;
margin-bottom: 0;
}
}
}
到目前为止，service，model 都是空的。要实现登录注册的功能，就得完善它们。
