一.利用npm安裝React-intl.

     npm install react-intl -save

     由於瀏覽器差異問題,有時候也會在React-intl基礎上另外安裝intl.

     npm install intl --save

二.如何使用<FormattedMessage />這個元件是語言國際化的重點

     1.在含有要翻譯的內容的UI元件中引入

      import {FormattedMessage} from 'react-intl';

     2.利用<FormattedMessage />元件處理要翻譯的內容

        const addSpriteMessage = (
         <FormattedMessage
          defaultMessage="Add Sprite"
          description="Button to add a sprite in the target pane"
          id="targetPane.addSprite"
           />
          );   

        1.FormattedMessage中的三個屬性,其中defaultMessage就是要翻譯的內容.description為對要翻譯的內容的一些介紹.id作為

           唯一標記要翻譯的內容.

        2.而後使用addSpriteMessage代替要翻譯的內容.

      3.定義intl.js檔案

          import {addLocaleData} from 'react-intl';
          import {updateIntl as superUpdateIntl} from 'react-intl-redux';
          import {IntlProvider, intlReducer} from 'react-intl-redux';
          import locales from '../locale.js';

          Object.keys(locales).forEach(locale => {
              addLocaleData(locales[locale].localeData);
          });

          const intlInitialState = {
              intl: {
                 defaultLocale: 'en',
                 locale: 'en',
                 messages: locales.en.messages
              }
           };

           const updateIntl = locale => superUpdateIntl({
               locale: locale,
               messages: locales[locale].messages || locales.en.messages
            });

          export {
             intlReducer as default,
             IntlProvider,
             intlInitialState,
             updateIntl
          };

      4.生成translations檔案

          檔案目錄結構:           translation                   components                   containers            包括了要翻譯的UI元件與容器元件,檔案格式是.json.            例如:            sprite.json            內容是:             [
                {
                     "id": "targetPane.addSprite",
                     "description": "Button to add a sprite in the target pane",
                     "defaultMessage": "Add Sprite"
                }
            ]             可以明顯的看到還是包括了以上說的三項內容.

      5.建立en.json與zh-Hans.json檔案

         這兩個json檔案時英語與漢語的對應:          例如:          en.json          "targetPane.addSprite": {
              "message": "Add Sprite"
          },           zh-Hans.json           "targetPane.addSprite": {
              "message": "新增角色"
          },           注意這裡使用了唯一標記id.

      6.生成messages.json檔案

          這個檔案是直接用到的翻譯檔案.           案例:           const guiMsgs = {
            "en": {
                    "messages": {
                        "targetPane.addSprite": "Add Sprite"
                     }
                },
             "zh-Hans": {
                    "messages": {
                        "targetPane.addSprite": "新增角色"
                     }
                 }
           }         

      7.推薦部落格                     

          https://segmentfault.com/a/1190000005824920

          http://blog.csdn.net/ling369523246/article/details/52943744