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. HTTP/2 服务器推送(Server Push)教程(HTTP/2 协议的主要目的是提高网页性能,配置Nginx和Apache)

    HTTP/2 协议的主要目的是提高网页性能. 头信息(header)原来是直接传输文本,现在是压缩后传输.原来是同一个 TCP 连接里面,上一个回应(response)发送完了,服务器才能发送下一个, ...

  2. centos 6.7下安装rabbitmq 3.6.6过程

    准备,请确保有root权限或者sudo权限,不然不用继续看下去了. 1.erland的安装 首先测试一下是否已经安装了erlang,命令 rpm -qa | grep erlang 若没有安装,则 y ...

  3. Oracle定义变量、常量

    1 定义变量 declare var_countryname varchar2(50):='中国'; 2 定义常量 con_day constant integer:=365;

  4. NewtonSoft对象转json时,把 NULL 转 "" , 过滤 NULL, DateTime 时间类型去除 T

    IsoDateTimeConverter timeConverter = new IsoDateTimeConverter(); timeConverter.DateTimeFormat = &quo ...

  5. [lougu1341]无序字母对

    Description: 给定n个各不相同的无序字母对(区分大小写,无序即字母对中的两个字母可以位置颠倒).请构造一个有n+1个字母的字符串使得每个字母对都在这个字符串中出现. Solution: 欧 ...

  6. 【DRF序列化】

    目录 基本的序列化操作 外键/多对多关系的序列化 反序列化的操作 单条数据查询及更新 数据的校验 单个字段的校验 多个字段的校验 自定义校验器 终极用法 ModelSerializer 前后端分离后, ...

  7. logback 生成日志

    <?xml version="1.0" encoding="UTF-8"?> <configuration> <appender ...

  8. 【Uva 10163】Storage Keepers

    [Link]: [Description] 你有n(n≤100)个相同的仓库.有m(m≤30)个人应聘守卫,第i个应聘者的能力值 为Pi(1≤Pi≤1000).每个仓库只能有一个守卫,但一个守卫可以看 ...

  9. Mysql学习总结(16)——Mysql之数据库设计规范

    一.三大范式 1.第一范式:消除一个字段包含多个数据库值,消除一个记录包含重复的组(单独的一列包含多个项目),即可满足1NF. 2.第二范式:消除部分依赖性即可转化为2NF.部分依赖性表示一个记录中包 ...

  10. 用Navicat连接MySQL数据库出现1251错误:密码方式错误

    原因:因为MySQL8.0是最新版密码保存方式,而图形化数据库管理工具还是原先的密码保存方式. 解决方式: 用CMD命令号方式进入MySQL use mysql: ALTER USER 'root'@ ...