格式化日期，数字，字符串

react-intl文档 https://formatjs.io/docs/react-intl/
Github https://github.com/formatjs/formatjs
npm https://www.npmjs.com/package/react-intl

  1. yarn add react-intl
  3. # babel提取多语言
  4. npm i babel-plugin-react-intl -D
  5. npm i react-intl-translations-manager -D
  7. # 自动提取多语言变量
  8. npm run translations

image.png
语种名称代码
https://ibaslogic.github.io/i18n_react_intl_project/
https://github.com/Ibaslogic/i18n_react_intl_project
https://juejin.cn/post/6977183729944887333
[

](https://formatjs.io/docs/getting-started/installation/)

react-intl用法

https://formatjs.io/docs/getting-started/installation/
多语言国际化 react组件： 国际化的核心步骤有两步：

  1. 创建资源文件，以 key-value 方式存储
  2. 加载资源文件，将页面上 key 的内容替换为相关 value ```jsx import * as React from ‘react’ import {IntlProvider, FormattedMessage, FormattedNumber} from ‘react-intl’

// Translated messages in French with matching IDs to what you declared const messagesInFrench = { myMessage: “Aujourd’hui, c’est le {ts, date, ::yyyyMMdd}”, }

export default function App() { return (

) }

  2. <a name="nxii1"></a>
  3. ### IntlProvider
  4. 核心的2个属性
  6. - locale
  7. - messages
  8. 3. 重点关注 src/locales/en-US.json 把中文翻译成英文
  9.    1. google翻译
  10.    2. 有道翻译
  11.    3. 国际化资料 [https://blog.csdn.net/qq_37860930/article/details/82853408](https://blog.csdn.net/qq_37860930/article/details/82853408)
  13. [https://www.jianshu.com/p/574f6cea4f26](https://www.jianshu.com/p/574f6cea4f26)<br />[https://segmentfault.com/a/1190000005824920](https://segmentfault.com/a/1190000005824920)<br />[https://www.jianshu.com/p/574f6cea4f26](https://www.jianshu.com/p/574f6cea4f26)<br />[https://formatjs.io/docs/getting-started/installation/](https://formatjs.io/docs/getting-started/installation/)<br />[https://www.jianshu.com/p/c57e000c2bbf](https://www.jianshu.com/p/c57e000c2bbf)<br />[https://formatjs.io/docs/react-intl/upgrade-guide-5x](https://formatjs.io/docs/react-intl/upgrade-guide-5x)<br />[
  15. ](https://github.com/sundway/blog/issues/9)<br />We no longer distribute locale-data<br />[https://github.com/formatjs/formatjs/issues/203](https://github.com/formatjs/formatjs/issues/203)<br />path-to-regexp [https://github.com/pillarjs/path-to-regexp](https://github.com/pillarjs/path-to-regexp)
  18. <a name="M0beX"></a>
  19. ### 存储多语言的key
  20. locale: zh-CN<br />![image.png](https://cdn.nlark.com/yuque/0/2021/png/112859/1635294058451-ab2d9ecb-d84b-4aca-bc57-0e89056dab8b.png#clientId=u597bfef0-42f5-4&from=paste&height=203&id=u784818b9&originHeight=406&originWidth=1366&originalType=binary&ratio=1&size=54437&status=done&style=none&taskId=u55b4ea72-685b-4d2f-b243-a6b7511bf8b&width=683)
  22. React-intl是雅虎的语言国际化开源项目FormatJS的一部分，通过其提供的组件和API可以与ReactJS绑定<br />React-intl提供了两种使用方法，一种是引用React组建，另一种是直接调取API，官方更加推荐在React项目中使用前者，只有在无法使用React组件的地方，才应该调用框架提供的API
  24. <IntlProvider /> 包裹在需要语言国际化的组建的最外层，为包含在其中的所有组建提供包含id和字符串的键值对。（如："homepage.title":"Hommily";）
  26. 语言的国际化不仅仅是将界面上的UI文字翻译成另一种语言，还包括了日期&时间显示，数字显示（英文环境下每隔3位一个逗号：1,000），量词的显示（一个苹果是apple，两个苹果就应该是apples），甚至还有一个字符串中间插了一个变量的情况（"今天午饭吃了{count}个鸡腿"
  29. antd pro使用的是umi 插件[umi-plugin-locale](https://github.com/umijs/umi-plugin-locale)，封装了react-intl, <br />api 与 react-intl 基本相同，并做了封装使用起来更加方便<br />可以参考 [https://pro.ant.design/docs/i18n-cn](https://pro.ant.design/docs/i18n-cn)<br />[https://blog.csdn.net/qq_33539213/article/details/101297774](https://blog.csdn.net/qq_33539213/article/details/101297774)<br />[https://www.cnblogs.com/qiaojie/p/6411199.html](https://www.cnblogs.com/qiaojie/p/6411199.html)
  32. <a name="D4Y9E"></a>
  33. ### react-intl版本
  35. 2.9.0
  36. ```jsx
  37. "react-intl": "^2.9.0",
  38. "babel-plugin-react-intl": "^3.0.1",

5.20.10

  1. "react-intl": "^5.20.10",
  2. "babel-plugin-react-intl": "^8.2.25",

react-intl原理

  1. 原理和react-redux的实现原理类似
  2. 最外层包一个Provider，利用getChildContext，将intlConfigPropTypes存起来
  3. 在FormattedMessage、FormattedNumber等组件或者调用injectIntl生成的高阶组件中使用，来完成国际化
  4. 优点：多语言的提取，全部是自动提取的
  5. 缺点：组件多语言方便，但是字符串多语言每次都要注入intl
    1. 主要原因是formatMessage react-i18n不直接暴露

react-intl参数

image.png

  1. injectIntl
  2. defineMessages
  3. IntlProvider
  4. FormattedDate
  5. FormattedTime
  6. FormattedRelativeTime
  7. FormattedNumber
  8. FormattedPlural
  9. FormattedMessage
  11. // main.js
  12. import { addLocaleData } from 'react-intl'; /* react-intl imports */
  13. import en from 'react-intl/locale-data/en';
  14. import zh from 'react-intl/locale-data/zh';
  16. addLocaleData([...en, ...zh]);  // 引入多语言环境的数据