react 国际化 react-intl-universal

7月底开始,公的要把之前的一个项目增加国际化的需求。现在基本做完了,在转测阶段,就把之前的东西记录一下。

效果图

在这里插入图片描述

react-intl-universal包

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

具体实现

看过我之前的文章的同学,估计知道我之前的页面结构和代码。在国际化之前我适当的修改了一下。但是展示的结构不变。实际效果最上面的gif图有展示了。

  1. 引入react-intl-universal,这个看文档即可;
  2. 增加两个json文件;
    1. en-US.json 用于存放英文对应的数据
      {
          "key1": "Internationalization"
      }
      
    2. zh-CN.json 用于存放中文对应的数据
      {
          "key1": "国际化"
      }
      
    两个json文件中对应的key值是一样的。intl.get(key) 这里用到的key 就是这两个json文件中的key值。
  3. 新增一个locale.js的页面文件;
  4. 修改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 };
    
    1. 发送消息
      发送消息是在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;
    
    1. 接收消息
      这个在App.js文件中,这里不多说了。
  4. 页面国际化的实现

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基本完成。

小结

其实国际化的实现不难。但是在项目中有很多细节需要处理,比如: antd 组件的国际化,antd 日历组件的处理,下拉组件的处理。在做的时候,要注意antd 提供的国际化组件,也要注意react-intl-universal的使用。很多细节,坑,需要大家自己踩了自己才会知道。项目代码下载地址:https://gitee.com/hgdq/myblog.git

已标记关键词 清除标记
©️2020 CSDN 皮肤主题: 编程工作室 设计师:CSDN官方博客 返回首页