React 项目实现多语言切换

前言：

     在做项目过程中，遇到一个需求就是支持多语言，实现国际化的功能。感谢React社区的强大，提供了 umi-plugin-locale插件来实现国际化的功能。

首先我们是基于 Umi 搭建的项目。

 umi-plugin-locale 约定 在 src/locales 中引入 相应的 js，例如 en-US.js 和 zh-CN.js，

注意：文件名称要和locale的值要对应起来。

   并且在项目配置文件中做如下配置：

    

      locale: {
        enable: true, // default false
        default: 'zh-CN', // default zh-CN
        baseNavigator: true, // default true, when it is true, will use `navigator.language` overwrite default
      },

就可以在代码中使用全球化的功能了。

umi-plugin-locale 封装了react-intl, api 与 react-intl 基本相同，并做了封装使用起来更加方便。全部 api 如下：

import { formatMessage, setLocale, getLocale, FormattedMessage } from 'umi/locale';

格式化字符串#

如果我们在 en-US.js 和 zh-CN.js 中分别作了如下配置：

// en-US.js

export default {
  'navbar.lang': '中文',
}

// zh-CN.js

export default {
  'navbar.lang': 'English',
}

我们就可以在组件中这样使用

import { formatMessage } from 'umi/locale';

export default () => {
  return <div>{formatMessage({ id: 'navbar.lang' })}</div>;
};

设置区域#

umi-plugin-locale 暴露了名为 setLocale 和 getLocale 的 api，通过这两个 api 可以方便的切换区域。

代码看起来像这样的：

...
 changLang = () => {
    const locale = getLocale();
    if (!locale || locale === 'zh-CN') {
      setLocale('en-US');
    } else {
      setLocale('zh-CN');
    }
  };
  render(){
        <Button
          size="small"
          ghost={theme === 'dark'}
          style={{
            margin: '0 8px',
          }}
          onClick={() => {
            this.changLang();
          }}
        >
          <FormattedMessage id="navbar.lang" />
        </Button>
  }

一个简单的demo：

     https://github.com/lghxuelang/localeLange.git