React国际化初次尝试

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
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容