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. Http post提交和get提交

    public string  PostParameter(string url)         {  string message="";             GetOrde ...

  3. html5中的空格符

    html5中的空格符 1,Html中空格      不断行的空白(1个字符宽度)      半个空白(1个字符宽度)     一个空白(2个字符宽度)      窄空白(小于1个字符宽度) 2,Css ...

  4. ubuntu下eclipse java ee首次打开提示找不到jdk的问题

    最近想搭建一个本地服务器,方便写一些网络请求相关的demo,遂下载了eclipse  ee版 ( IDEA证书好贵,暂时不想买-=-),下载---解压 一切正常,但是当在terminal下打开ecli ...

  5. Python day字符串所有使用

    字符串所有的操作name = "dio"names = "my\t name is {Name} and i am a {job}"print(name.cap ...

  6. JNDI学习总结(1)——JNDI入门

    JNDI是 Java 命名与目录接口(Java Naming and Directory Interface),在J2EE规范中是重要的规范之一,不少专家认为,没有透彻理解JNDI的意义和作用,就没有 ...

  7. JavaScript学习总结(10)——实用JS代码大全

    事件源对象  event.srcElement.tagName  event.srcElement.type 捕获释放  event.srcElement.setCapture();   event. ...

  8. [TypeScript] Shallow copy object by using spread opreator

    For example we have an object: const todo = { text: "Water the flowers", completed: false, ...

  9. 【剑指Offer学习】【面试题49:把字符串转换成整数】

    题目:实现一个函数stringToInt,实现把字符串转换成整数这个功能.不能使用atoi或者其它相似的库函数. 题目解析 这看起来是非常easy的题目,实现基本功能 ,大部分人都能用10行之内的代码 ...

  10. Vue 消息无缝滚动

    vue实现消息向上无缝滚动效果 <ul class="new-list" :class="{anim:animate}" @mouseenter=&quo ...