Using a react-intl FormattedNumber component, we'll pass a Number and a few additional props in order to render the correct separator and currency symbols for different languages.

For example we have price data as such:

        "price": {
"en-US": "16.19",
"es-ES": "15.09",
"fr-FR": "15.09"
},

We can use FormattedNumber  to display the correct currency.

let locale = (navigator.languages && navigator.languages[0])
|| navigator.language
|| navigator.userLanguage
|| 'en-US'; <p>
<FormattedNumber
style='currency'
currency={locale === 'en-US' ? 'USD': 'EUR'}
currencyDisplay='symbol'
value={merchant.price[locale]} />
</p>

[React Intl] Format Numbers with Separators and Currency Symbols using react-intl FormattedNumber的更多相关文章

  1. 《React Native 精解与实战》书籍连载「React Native 源码学习方法及其他资源」

    此系列文章将整合我的 React 视频教程与 React Native 书籍中的精华部分,给大家介绍 React Native 源码学习方法及其他资源. 最后的章节给大家介绍 React Native ...

  2. 《React Native 精解与实战》书籍连载「React Native 底层原理」

    此文是我的出版书籍<React Native 精解与实战>连载分享,此书由机械工业出版社出版,书中详解了 React Native 框架底层原理.React Native 组件布局.组件与 ...

  3. 《React Native 精解与实战》书籍连载「React 与 React Native 简介」

    此文是我的出版书籍<React Native 精解与实战>连载分享,此书由机械工业出版社出版,书中详解了 React Native 框架底层原理.React Native 组件布局.组件与 ...

  4. [React Intl] Format a Date Relative to the Current Date Using react-intl FormattedRelative

    Given a date, we’ll use the react-intl FormattedRelative component to render a date in a human reada ...

  5. [React Intl] Format Date and Time Using react-intl FormattedDate and FormattedTime

    Using the react-intl FormattedDate and FormattedTime components, we’ll render a JavaScript Date into ...

  6. 深入React事件系统(React点击空白部分隐藏弹出层;React阻止事件冒泡失效)

    只关注括号内问题的同学,可直接跳转到蓝字部分.(标题起的有点大,其实只讨论一个问题) 两个在React组件上绑定的事件,产生冲突后,使用e.stopPropagation(),阻止冒泡,即可防止事件冲 ...

  7. 《React Native 精解与实战》书籍连载「React Native 网络请求与列表绑定」

    此文是我的出版书籍<React Native 精解与实战>连载分享,此书由机械工业出版社出版,书中详解了 React Native 框架底层原理.React Native 组件布局.组件与 ...

  8. 《React Native 精解与实战》书籍连载「React Native 中的生命周期」

    此文是我的出版书籍<React Native 精解与实战>连载分享,此书由机械工业出版社出版,书中详解了 React Native 框架底层原理.React Native 组件布局.组件与 ...

  9. [React] Use the URL as the source of truth in React

    In Single Page Apps we're used to fetch the data on event callbacks. That disables the capacity to u ...

随机推荐

  1. [转]LNMP环境下的Web常见问题排查(精品)

    来源:http://mp.weixin.qq.com/s? __biz=MjM5NzUwNDA5MA==&mid=200596752&idx=1&sn=37ecae802f32 ...

  2. uva103 - Stacking Boxes(DAG)

    题目:uva103 - Stacking Boxes(DAG) 题目大意:给出N个boxes, 而且给出这些箱子的维度.要求找一个最长的序列.可以使得以下的箱子一定可以有个维度序列大于上面的那个箱子的 ...

  3. js---12数据类型,数据类型转换,NaN,

    <!DOCTYPE HTML> <html> <head> <meta http-equiv="Content-Type" content ...

  4. 关于li的排列,我的面试题

    来到北京的第二周,收到了单位的面试,一面的时候面试官问了微信钱包里的那个快速入口的排列,我当时在面试官的引导下答的还可以,但是在实际中有很多的方法和各自不同的问题,我来总结下. 1.flex布局,其实 ...

  5. 雷观(二十三)-IT互联网技术,不拼创新拼努力,特别低公平

    上次发表"雷观(二十二)"是在2015年3月7日,一转眼,就快到了11月.  前段时间,终于狠下心来,写了本篇,第二十三啦.  小雷同志,要加油了~  早日达到百篇雷观的里程碑~  ...

  6. FZU 1921 栀子花开

    栀子花开 Time Limit: 1000ms Memory Limit: 32768KB This problem will be judged on FZU. Original ID: 19216 ...

  7. hdu2768Cat vs. Dog (反建法,最大独立集)

    Cat vs. Dog Time Limit: 2000/1000 MS (Java/Others) Memory Limit: 32768/32768 K (Java/Others) Total S ...

  8. svn: Can&#39;t convert string from &#39;UTF-8&#39; to native encoding 解决的方法

    今天在down代码时遇到了例如以下问题: [xxx@xxx ~]$ svn co https://xxxxxxxxxxxxx svn: Can't convert string from 'UTF-8 ...

  9. 对AWS的计费有点糊涂

    对AWS的计费有点糊涂 今天收到亚马逊的账单,就两笔 1. US West (Oregon) Region     Elastic IP Addresses $0.005 per Elastic IP ...

  10. Android学习笔记进阶16之BitmapShader

    <1>简介 具体的看一下博文:Android学习笔记进阶15之Shader渲染 public   BitmapShader(Bitmap bitmap,Shader.TileMode ti ...