React學習（語言國際化）

  所謂的語言國際化就是講網頁內部的所有文本顯示的內容做處理，使其根據不同的語言環境顯示不同文案的功能，當然了，這個並不能對圖片做處理，僅能對文本內容做處理，當然了，你也可以使用文本拼接的方式讀取指定不同文件夾下的圖片內容。

參考文章：https://blog.csdn.net/hfhwfw161226/article/details/81178515

https://www.npmjs.com/package/react-intl-universal

1、安裝插件

  React使用其他第三方插件的話必須要安裝進入，除非是單js文件使用html的標籤引入也可以，安裝命令如下：

npm install react-intl-universal --save

2、添加語言包

  這個語言包可是很重要的，因爲所有的文案內容都在當中。這個語言包要注意很重要的一點，那就是”內部json數據的層級僅爲一層，也就是隻能有一個json實體對象，不能有任何子對象“。

  添加路徑隨意，起名隨意，這方面沒有硬性要求，只要最後使用是能尋址到就好。

3、在頁面中使用

(1).導入插件import intl from 'react-intl-universal';

(2).讀取語言包const locales = {"zh-CN": require('./locales/zh-CN.js'),};

(3).在組件渲染前初始化語言包intl.init({currentLocale: 'zh-CN',locales,}).then(() => {this.setState({initDone: true});});

(4).調用intl.get...

4、文本獲取方式

1. 純文本獲取intl.get('文本key');

2. html文本獲取intl.getHTML('文本key');

3. 設置缺省文本intl.get('not-exist-key').defaultMessage('沒有找到這句話');

4. 獲取帶變量的文本，變量文本:"HELLO": "Hello, {name}. Welcome to {where}!"，讀取方式:intl.get('HELLO', {name:'banana', where:'China'});

5. 文本變量格式化，具體語法爲**{變量名, 類型, 格式化}**，下面說幾種特殊的變量格式化：

   ①.千分位分隔符顯示

   "PHOTO": "You have {num ,number,#}"

   ②.數字形式邏輯判斷（關鍵字plural）

   "PHOTO": "You have {num, plural, =0 {no photos.} =1 {one photo.} other {# photos.}}"

   ③.顯示貨幣格式,會自動在值前面加上響應的貨幣符號

   "SALE_PRICE": "The price is {price, number, USD}"

   ④.日期格式化

   "SALE_START": "Sale begins {start, date}", "SALE_END": "Sale ends {end, date, long}"``intl.get('SALE_START', {start:new Date()}); // Sale begins 4/19/2017 intl.get('SALE_END', {end:new Date()}); // Sale ends April 19, 2017

   當類型是date的時候，參數說明：short 顯示短日期；medium 短文本顯示月份；long 長文本顯示月份；full 顯示最詳細的時間。

   當類型是time的時候，參數說明：short 顯示時間爲小時和分鐘；medium 顯示時間爲時分秒；long 顯示時間爲時分秒以及時區。

5、建議

  建議創建一個基類組件，其他子組件使用繼承的方式，子類重寫一個基類方法來實現調用，基類方法如下：

import React from 'react'
import intl from 'react-intl-universal';

// 語言配置讀取
const locales = {
    "zh-CN": require('./../assets/locales/zh-CN'),
};
/**
 * 功能作用：基類自定義繼承的組件，爲了做些特殊操作實現的
 * 初始註釋時間： 2019/8/29 0029 下午 17:15:30
 * 註釋創建人：LorenWang（王亮）
 * 方法介紹：
 * 思路：
 * 修改人：
 * 修改時間：
 * 備註：當前爲爲了語言初始化使用的
 */
export default class BaseCustomReactComponent extends React.Component {
    state = {initLanguageDone: false}

    /**
     *在渲染初始化語言加載
     */
    componentDidMount() {
        //根據語言讀取響應數據
        intl.init({
            // eslint-disable-next-line
            currentLocale: jstlwGetUrlParams("language") === 'en-US' ? 'en-US' : 'zh-CN',
            locales,
        }).then(() => {
            this.setState({initLanguageDone: true});
        });
    }

    /**
     * 子類實現的方法，會在語言初始化之後調用
     */
    renderChild() {
    };

    render() {
        if (this.state.initLanguageDone) {
            return this.renderChild()
        } else {
            return null;
        }
    }
}

jstlwGetUrlParams方法爲js方法，獲取地址：http://file.momentsoflife.work/Common.js