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})
  }

• 渲染两个单选按钮

                
                  English
                
                
                  中文
                
              

• 给每个表单域设置当前语言环境，如果是默认的话就是英文。

          {getFieldDecorator("area", {
            rules: [
              {
                required: true,
                message: "Select something!"
              }
            ]
          })(
            
              Jack
              Lucy
            
          )}
        

---

效果展示 只改了两个测试一下

intl.2019-08-03 03_38_05.gif