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狀態值，這樣就能成功的保存語言狀態值，成功解決！！！ 還是要感謝文章的原創作者，讓我這個小白受益匪淺！！