React
有专门的库来提供国际化业务,如react-intl
,这是react-intl官方库的介绍。
Internationalize React apps. This library provides React components and an API to format dates, numbers, and strings, including pluralization and handling translations.
简单翻译一下,就是一个国际化app,提供组件和API来格式化日期,数字和字符串等。
它的文档中的入门在这里react-intl getting satrt!。
但是因为时间很赶,需要展示效果,自己尝试了一种很傻瓜低效的方法,and take some notes.
简单说明一下思路,大多数国际化功能需要你去手动切换的,包括下拉框选择,单选框选择等,这次是一个很简单的功能,只切换中英文,因此设置两个单选按钮就够了。
给这两个按钮设置点击事件,点击中文组件切换到中文,点击English切换到英文,在构造器中添加this.state={lan:true}
,这里为什么值是true
呢,因为如果设置成字符串的话,在接下来条件判断当前语言时,在我看来不如三元运算优雅,并且默认英语为默认语言。
部分代码如下:
- 添加内部状态
constructor(props) {
super(props);
this.state = {
cannotSelect: true,
language:true //默认英语
};
}
- 添加改变语言事件
handleChangeLanToCN = () => {
this.setState({language:false})
}
handleChangeLanToUS = () => {
this.setState({language:true})
}
- 渲染两个单选按钮
<Radio.Group>
<Radio.Button key="en" onClick={this.handleChangeLanToUS}>
English
</Radio.Button>
<Radio.Button key="cn" onClick={this.handleChangeLanToCN}>
中文
</Radio.Button>
</Radio.Group>
- 给每个表单域设置当前语言环境,如果是默认的话就是英文。
<Form.Item label={this.state.language?'Area':'服务区域'}>
{getFieldDecorator("area", {
rules: [
{
required: true,
message: "Select something!"
}
]
})(
<Select showSearch onChange={this.handleSelect}>
<Option value="jack">Jack</Option>
<Option value="lucy">Lucy</Option>
</Select>
)}
</Form.Item>
效果展示 只改了两个测试一下
intl.2019-08-03 03_38_05.gif