react 国际化 react-intl-universal

原文链接 https://blog.csdn.net/zhuming3834/article/details/98847188

刚开始学习react，感觉空学太单调实际无法应用，所以将原来的vue项目打算用react重写一下，原来项目支持中英文切换国际化，vue+i18n所以有了下面的react+react-intl-universal

效果图

react-intl-universal包

由于项目是react的，所以使用的是react-intl-universal。其实这个npm包的使用还是很简单方便的。

具体实现

1. cnpm install --save react-intl-universal
2. 增加两个json文件；

1. en-US.json 用于存放英文对应的数据

   {"key1": "Internationalization"
   }
   <
   

2. zh-CN.json 用于存放中文对应的数据

   {
       "key1": "国际化"
   }
   

两个json文件中对应的key值是一样的。 intl.get(key) 这里用到的key 就是这两个json文件中的key值。

• 新增一个locale.js的页面文件；
• 修改App.js文件,代码如下：

• import React, { Component } from 'react';
  import { BrowserRouter as Router} from 'react-router-dom';
  import MyRoute from './router.js';
  import {emit} from './emit.js'
  import zh_CN from 'antd/es/locale/zh_CN';
  import en_US from 'antd/es/locale/en_US';
  import intl from 'react-intl-universal';
  import { ConfigProvider } from 'antd';
  import './App.css';
  import './index.less';
  const locales = {
    'en-US': require('./locales/en-US.json'),
    'zh-CN': require('./locales/zh-CN.json'),
  };
  class App extends Component {
    constructor(props) {
      super(props);
      this.state = {
          antdLang: zh_CN,  // 修改antd  组件的国际化
      }
    }
    componentDidMount() {
      emit.on('change_language', lang => this.loadLocales(lang)); // 监听语言改变事件
      this.loadLocales(); // 初始化语言
    }
    loadLocales(lang = 'zh-CN') {
      intl.init({
          currentLocale: lang,  // 设置初始语音
          locales,
      }).then(() => {
          this.setState({
              antdLang: lang === 'zh-CN' ? zh_CN : en_US
          });
      });
    }
    render() {
      return (
        // ConfigProvider antd  组件的国际化
        <ConfigProvider locale={this.state.antdLang}>  
          <Router>
            <MyRoute />
          </Router>
        </ConfigProvider>
      );
    }
  }
  export default App;
  

  这里有几点需要注意的：

  1. antd 的国际化：https://ant-design.gitee.io/docs/react/i18n-cn 这里需要看这个文档
     我使用的antd 是 3.16.2版本，所以使用的是ConfigProvider组件用于antd组件的全局国际化，有的版本使用的是LocaleProvider，两个组件用法一样，大家根据自己的版本选择。

  2. 事件监听，这里是通过events实现的，就是导航栏在改变语言时，把改变事件传递到App.js中；传递到其他文件也可以的，只需要增加对应的监听时间即可

  3. 事件监听的实现：

     1. emit.js 文件：

     const EventEmitter = require('events').EventEmitter; 
     const emit = new EventEmitter(); 
     export { emit };
     

  2. 发送消息
     发送消息是在Header组件中做的，Header.js文件内容

  import React, { Component } from 'react';
  import { Select } from 'antd';
  import {emit} from '../../emit.js'
  import '../../assets/css/index.less'
  const { Option } = Select;
  class Header extends Component {
      handleChange(val) {
          // 发送消息
          emit.emit('change_language', val);
      }
      render() {
          return (
              <div className='header'>
                  Header
                  <Select defaultValue="中文" onChange={this.handleChange.bind(this)}>
                      <Option value="zh-CN">中文</Option>
                      <Option value="en-US">English</Option>
                  </Select>
              </div>
          );
      }
      componentDidMount() {
      }
  }
  export default Header;
  

  3. 接收消息
     这个在App.js文件中，这里不多说了。

• 页面国际化的实现

• import React from 'react';
  import intl from 'react-intl-universal';
  class Locale extends React.Component {
      render() {
          return (
              <div className='locale'>
                  <p>国际化测试: {intl.get('key1')}</p>
              </div>
          );
      }
      componentDidMount() {
      }
  }
  export default Locale;
  

  到这里一个简单的国家化demo基本完成。

  小结

  做完了之后感觉还是有点遗憾就是刷新之后初始化语言一直都是中文，无法保存刷新之前语言状态，于是加了一些处理，大概思路就是利用redux存储当前语言状态，只要语言进行切换就dispatch让stroe对应语言变量更新,页面刷新app.js重新读取初始语言状态，直接读取store状态值，这样就能成功的保存语言状态值，成功解决！！！ 还是要感谢文章的原创作者，让我这个小白受益匪浅！！