简单实现react.js语言国际化

一.利用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