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. Windows 操作系统与 .NET Framework

    Windos 2000 在单位的机房里好不easy才找到一台安装 Windows 2000 Server SP4 操作系统的server.这台硕果仅存的server到本月底也要退役了. Windows ...

  2. R中读取文件,找不到路径问题 No such file or directory

      R中读取文件,找不到路径问题 No such file or directory 近日,读取文件时.出现例如以下问题 > passenger = read.csv('internationa ...

  3. tomcat 分别在window 和 Linux上配置SSL-安全问题

    公司项目收尾后.通过压力測试后的安全測试.安全測试后中,对于网络传输中数据加密问题存在安全隐患. 须要配置SSL. 简介下SSL协议:SSL或者Secure Socket Layer,是一种同意web ...

  4. es67

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  5. $.each(data, function (index, value) { })的用法;json和list<>的互相转换

    在json中常常碰到这样的代码: jquery $.each(data, function (index, value) {    }) 遍历处理data,可以是数组.DOM.json等,取决于直接给 ...

  6. OpenCV —— 图像局部与分割(二)

    分水岭算法 将图像中的边缘转化成“山脉”,将均匀区域转化为“山谷” 分水岭算法首先计算灰度图像的梯度,这对山谷或没有纹理的盆地(亮度值低的点)的形成有效,也对山头或图像中没有主导线段的山脉(山脊对应的 ...

  7. 搭建并配置本地GitLab服务器教程

    由于工作单位不一定能够方便使用外部网络,现以下载rpm包来搭建一套本地GitLab服务器. 1. 系统准备 系统:redhat 7.3 2. 下载所需安装包 去官网下rpm包,下载地址,ce是免费的社 ...

  8. TYVJ P1153 间谍网络

    P1153 间谍网络 时间: 1000ms / 空间: 131072KiB / Java类名: Main 描述 由于外国间谍的大量渗入,国家安全正处于高度危机之中.如果A间谍手中掌握着关于B间谍的犯罪 ...

  9. SNMP介绍,OID及MIB库

    http://blog.sina.com.cn/s/blog_4502d59c0101fcy2.html

  10. C++里面virtual函数及虚表大小

    实验了下面的函数: #include <vector> #include <iostream> using namespace std; class A { public: v ...