image.png

    1. navigator.languages
    3. "af", "sq", "ar-SA", "ar-IQ", "ar-EG", "ar-LY", "ar-DZ", "ar-MA", "ar-TN", "ar-OM",
    4.     "ar-YE", "ar-SY", "ar-JO", "ar-LB", "ar-KW", "ar-AE", "ar-BH", "ar-QA", "eu", "bg",
    5.     "be", "ca", "zh-TW", "zh-CN", "zh-HK", "zh-SG", "hr", "cs", "da", "nl", "nl-BE", "en",
    6.     "en-US", "en-EG", "en-AU", "en-GB", "en-CA", "en-NZ", "en-IE", "en-ZA", "en-JM",
    7.     "en-BZ", "en-TT", "et", "fo", "fa", "fi", "fr", "fr-BE", "fr-CA", "fr-CH", "fr-LU",
    8.     "gd", "gd-IE", "de", "de-CH", "de-AT", "de-LU", "de-LI", "el", "he", "hi", "hu",
    9.     "is", "id", "it", "it-CH", "ja", "ko", "lv", "lt", "mk", "mt", "no", "pl",
    10.     "pt-BR", "pt", "rm", "ro", "ro-MO", "ru", "ru-MI", "sz", "sr", "sk", "sl", "sb",
    11.     "es", "es-AR", "es-GT", "es-CR", "es-PA", "es-DO", "es-MX", "es-VE", "es-CO",
    12.     "es-PE", "es-EC", "es-CL", "es-UY", "es-PY", "es-BO", "es-SV", "es-HN", "es-NI",
    13. "es-PR", "sx", "sv", "sv-FI", "th", "ts", "tn", "tr", "uk", "ur", "ve", "vi", "xh",
    14. "ji", "zu"]
    16. FormattedMessage组件中的信息parser后显示以<span>包裹的文本；
    17.             *可以通过tagName指定其它标签包裹；
    18.             *以id属性的值"hello"为索引——索引到自定义的映射表'./locale/zh_CN'中去；
    19.             *messages['hello']——messages为父组件IntlProvider的props的messages属性；
    20.             *若没有上述的返回值，则显示defaultMessage的值"React Intl Translations Example";
    22. *FormattedMessage添加子元素或ReactElement；
    23.   *  <FormattedMessage id="hello">
    24.     *      {(formattedValue)=>(
    25.       *          <em>{formattedValue}</em>
    26.       *      )}
    27.     *  </FormattedMessage>
    29. <FormattedMessage
    30. id="hello"
    31. defaultMessage="React Intl Translations Example"
    32. />
    34. <FormattedMessage id="hello">
    35.   {(formattedValue)=>(
    36.     <em>{formattedValue}</em>
    37.   )}
    38.     </FormattedMessage>
    40.   <FormattedMessage
    41.     tagName = 'p'
    42.     id='superHello'
    43.     defaultMessage="Locales:北京"
    44.     values={{
    45.       someone:'zxdobest'
    46.     }}
    47.     />
    50.   输出HTML块结构；
    51. import React from 'react';
    52. import { injectIntl, intlShape, FormattedMessage } from 'react-intl';
    54. const ChildComponent = ({ intl }) => {
    55.     //传入的{intl}名称不可更改；
    56.     console.log(React.PropTypes)
    57.     const getMessage = intl.messages;
    58.     return(
    59.         <section>
    60.             {/*
    61.                 *通过intl.messages获取映射属性的方法；
    62.                 * 可以和任意内容（如：HTML标签）组合；
    63.                 * */}
    64.             <a>{getMessage.hello}</a>
    65.             {/*通过FormattedMessage格式化，可以传入参数{values}*/}
    66.             <FormattedMessage
    67.                 tagName = 'p'
    68.                 id='superHello'
    69.                 defaultMessage="Locales:北京"
    70.                 values={{
    71.                     someone:'zxdobest'
    72.                 }}
    73.             />
    74.             {/*
    75.                *这种结构，类同于intl.messages.superHello可以和其它内容任意组合；
    76.                *能且仅能获取superHello的映射；
    77.                * 目前尚未找到如果在第一种方法中传入values；
    78.             */}
    79.             <FormattedMessage id="superHello" values={{
    80.                 someone:'mihuartuanr'
    81.             }}>
    82.                 {(formattedValue)=>(
    83.                     <p>{formattedValue}</p>
    84.                 )}
    85.             </FormattedMessage>
    86.         </section>
    87.     );
    88. }
    90. ChildComponent.propTypes = {
    91.     intl: intlShape.isRequired
    92. }
    94. export default injectIntl(ChildComponent);
    97. react-intl@2.9.0
    100. https://github.com/formatjs/babel-plugin-react-intl
    101. babel-plugin-formatjs
    103. npm i babel-plugin-react-intl@2.9.0 -D
    104. Extracts string messages for translation from modules that use React Intl.
    106. 我使用babel-plugin-react-intl来自动提取我的React应用程序中的所有标签。我认为以下两点主要优势：
    108. 使用插件，我的应用程序中的所有标签都会自动提取到json文件。而不必手动更新将被翻译的json文件。这样，我就不用担心这个文件了，因为插件会将标签贴到它上面。
    109. 如果我不小心为标签创建了一个重复的ID，插件告诉我通过在webpack上抛出一个错误
    111.  一旦完成了所有这些消息的翻译，你只需要使用babel-plugin react-intl插件来构建webpack。这将从代码库中提取所有定义的消息到JSON文件中。这些文件然后发送给你的翻译人员，他们翻译所有这些消息，并将翻译放入一个平坦的JSON哈希中，然后将其加载到你的代码中，并且您有一个支持i18n的应用程序。

    chrome设置：高级设置-语言和输入设置