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. Oracle-02-数据库概述

    一.数据库用途 用于存放数据的软件 当中Application server重要,将数据存在表中每一个表关系就能够反映不同表之间数据的关系,比方淘宝用户注冊.商品买卖等数据存在操作系统的目录中,不便于 ...

  2. Codeforces 472D

    看官方题解提供的是最小生成树,怎么也想不明确.you can guess and prove it! 看了好几个人的代码.感觉实现思路全都不一样,不得不佩服cf题目想法的多样性 以下说说我自己的理解, ...

  3. layer:web弹出层解决方案

    layer:web弹出层解决方案 一.总结 一句话总结:http://layer.layui.com/ 1.layer中弹出层tips的使用(代码)是怎样的? 使用还是比较简单方便的 //tips层- ...

  4. 45. Express 框架 静态文件处理

    转自:http://www.runoob.com/nodejs/nodejs-express-framework.html Express 提供了内置的中间件 express.static 来设置静态 ...

  5. 39.C语言操作数据库

    一.准备工作: sqlite3工具集:链接:https://pan.baidu.com/s/1mjufXZa 密码:2ui7 安装步骤: 打开如下文件夹,找到sqlite3.dll,并放入系统目录 2 ...

  6. Android WebView页面加载优化

    目前webapp越来越多,体验也越来越好,为了能够更好的使用WebView展示出流畅的的页面,可以从以下几点做优化: WebView缓存 资源文件本地存储 减少耗时操作 客户端UI优化 可能有人会说了 ...

  7. passwd---设置用户密码的相关信息

    passwd命令   passwd命令用于设置用户的认证信息,包括用户密码.密码过期时间等.系统管理者则能用它管理系统用户的密码.只有管理者可以指定用户名称,一般用户只能变更自己的密码. 语法 pas ...

  8. Python-Flask项目开发--为什么需要搭建虚拟环境?

    在使用python开发过程中,需要使用到某些工具包/框架等,需要联网下载.   例如,联网安装Flask框架flask-0.10.1版本:pip install flask==0.10.1   此时, ...

  9. UVALive 5583 Dividing coins

    Dividing coins Time Limit: 3000ms Memory Limit: 131072KB This problem will be judged on UVALive. Ori ...

  10. 怎样使用 OneAPM 监控微软 Azure Cloud Service ?

    不知不觉微软 Azure 已经进入中国市场近两年的时间.那么 Azure 平台的性能到底怎样?资源载入的延迟.虚拟机的稳定性等问题是否切实满足客户期许.这些都是大家对微软 Azure 这个国外的云服务 ...