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

前言

之前写过一篇关于React的国际化文章，主要是用react-intl库，雅虎开源的。react-intl是用高阶组件包装一层来做国际化。
基于组件化会有一些问题，比如在一些工具方法中需要国际化，就需要自己去实现了。在umi-react快速开发框架我们采用
react-intl-universal库来实现，不仅支持组件化调用，也支持动态调用，实现国际化。

react-intl-universal 用法

安装

```
  npm install react-intl-universal --save
```

初始化
在以下示例中，我们intl使用app locale data（locales）初始化并确定动态使用哪个区域设置（currentLocale).
然后intl.get(…)用来获取国际化的消息

  import intl from \'react-intl-universal\';
  const locales = {
    "en-US": require(\'./locales/en-US.js\'),
    "zh-CN": require(\'./locales/zh-CN.js\'),
  };

  class App extends Component {

    state = {initDone: false}

    componentDidMount() {
      this.loadLocales();
    }

    loadLocales() {
      // init method will load CLDR locale data according to currentLocale
      // react-intl-universal is singleton, so you should init it only once in your app
      intl.init({
        currentLocale: \'en-US\', // TODO: determine locale here
        locales,
      })
      .then(() => {
        // After loading CLDR locale data, start to render
      this.setState({initDone: true});
      });
    }

    render() {
      return (
        this.state.initDone &&
        <div>
          {intl.get(\'SIMPLE\')}
        </div>
      );
    }

  }

调用

HTML Message (HTML 消息)

locale data:

{ "TIP": "This is <span style=\'color:red\'>HTML</span>" }

js code:

intl.getHTML(\'TIP\');

Default Message (设置默认消息)
js code:

intl.get(\'not-exist-key\').defaultMessage(\'default message\')

也可以用简写设置默认值

intl.get(\'not-exist-key\').d(\'default message\')

getHTML 也支持默认值

intl.getHTML(\'not-exist-key\').d(<div>hello</div>)

Message With Variables (消息添加变量)

locale data:

{ "HELLO": "Hello, {name}. Welcome to {where}!" }

js code:

intl.get(\'HELLO\', {name:\'Tony\', where:\'Alibaba\'})

在umi-react项目中加入国际化

在根目录新建locales文件夹，添加locale描述文件
en_US.js 文件

  export default {
    user: {
      login: {
        loginBtn: \'login\',
        placeholderName: \'Please input user name\',
        placeholderPws: \'Please input password\',
        forgetPwd: \'Forget password\',
        remember: \'Remember me\',
      },
      logout: \'logout\'
    }
  }

zh_CN.JS 文件

  ```
    export default {
      user: {
        login: {
          loginBtn: \'登录\',
          placeholderName: \'请输入用户名\',
          placeholderPws: \'请输入密码\',
          forgetPwd: \'忘记密码\',
          remember: \'记住我\',
        },
        logout: \'退出登录\'
      }
    }
  ```

在global modle中添加初始化state和Effect(changeLocale)和reducers(setLocale)

  import intl from \'react-intl-universal\';
  import locales from \'../locales\';
  import storage from \'utils/localStorage\';

  const defaultState = {
    currLocale: storage.get(\'locale\') || \'zh_CN\',
    localeLoad: false,
  }

  export default {
    namespace: \'global\',

    state: defaultState,

    effects: {
      *changeLocale({ payload }, { call, put }) {
        const params = {
          currentLocale: payload,
          locales
        };
        // 初始化国际化
        yield intl.init(params);

        yield put({
          type: \'setLocale\',
          payload: {
            currLocale: payload,
            localeLoad: true,
          }
        });
        // 把当前国际化持久化到 localstorage 中
        storage.add(\'locale\', payload);
      },
    },

    reducers: {
      setLocale(state, { payload }) {
        return {
          ...state,
          ...payload,
        };
      },
    },
  };

在layouts index.js 中掉用changeLocale初始化国际化和antd组件国际化

import React, { Component } from \'react\'
import BaseLayout from \'./baseLayout\';
import { LocaleProvider } from \'antd\';
import { connect } from \'dva\';
import zh_CN from \'antd/lib/locale-provider/zh_CN\';
import en_US from \'antd/lib/locale-provider/en_US\';
import { init } from \'./init\';

@connect(({global}) => {
  return {
    currLocale: global.currLocale,
    localeLoad: global.localeLoad,
  }
})
class Index extends Component {
  constructor() {
    super();
    init();
    this.state = {
      initDone: false,
    }
  }

  componentDidMount() {
    const {dispatch, currLocale} = this.props;
    // 更改国际化
    dispatch({
      type: \'global/changeLocale\',
      payload: currLocale,
    });
  }
  /**
  * 初始intl国际化和antd组件国际化
  */
  renderBody = () => {
    const {location: {pathname}, children, currLocale, localeLoad } = this.props;
    if (pathname === \'/login\') {
      return localeLoad && <React.Fragment>
        {children}
      </React.Fragment>;
    }
    return (
      localeLoad && (<LocaleProvider locale={ currLocale === \'zh_CN\' ? zh_CN : en_US }>
        <BaseLayout {...this.props} />
      </LocaleProvider>)
    );
  }

  render() {
    return (
      <React.Fragment>
        {this.renderBody()}
      </React.Fragment>
    )
  }
}

export default Index;

在 src/baseLayout/header.js 添加更改国际化的 select

import React, { Component } from \'react\';
import { Avatar, Dropdown, Menu, Icon, Select } from \'antd\';
import { connect } from \'dva\';
import intl from \'react-intl-universal\';
import styles from \'./baseLayout.less\';

const Option = Select.Option;

@connect(({user}) => {
  return {
    user: user.user
  }
})
class Header extends Component {
  /**
  * 切换语言
  */
  onLocaleChange = (value) => {
    this.props.dispatch({
      type: \'global/changeLocale\',
      payload: value,
    })
  }

  render() {
    const {currLocale, user} = this.props;
    return (
      <div className={styles.header}>
        <div className={styles.headerButton}>
          <Select
            defaultValue={currLocale}
            style={{ width: 100 }}
            onChange={this.onLocaleChange}>
            <Option value=\'zh_CN\'>中文</Option>
            <Option value=\'en_US\'>English</Option>
          </Select>
        </div>
      </div>
    )
  }
}

export default Header;

到此我们的系统国际化就可以用了。我们把登陆页面国际化完善起来。这要调用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;