[React Intl] Render Content Based on a Number using react-intl FormattedMessage (plural)
Using the react-intl
FormattedMessage
component, we’ll learn how to render content conditionally in our messages based on a number provided as a prop.
You’ll also learn the syntax necessary to render strings using a plural string matcher.
averageRating: 'Average Rating: {avg} ({count, plural, =0 {No reviews Yet!} one {# review} other {# reviews}})',
Based on the variable 'count', if =0, then show 'no review yet'; if equals to one, then showing '1 review', if more than one, then showing ''# reveiws", "#" will be replaced by the actual number.
const avgRating = book.reviews.length ? round(meanBy(book.reviews, (r) => r.rating), 2): 0; <h3>
<FormattedMessage id="detail.averageRating" values={{
avg: avgRating,
count: book.reviews.length
}} />
</h3>
[React Intl] Render Content Based on a Number using react-intl FormattedMessage (plural)的更多相关文章
- [React Intl] Render Content with Markup Using react-intl FormattedHTMLMessage
In this lesson, we’ll use the react-intl FormattedHTMLMessage component to display text with dynamic ...
- [React Intl] Render Content with Placeholders using react-intl FormattedMessage
Learn how to use react-intl to set dynamic values into your language messages. We’ll also learn how ...
- react解析: render的FiberRoot(三)
react解析: render的FiberRoot(三) 感谢 yck: 剖析 React 源码解析,本篇文章是在读完他的文章的基础上,将他的文章进行拆解和加工,加入我自己的一下理解和例子,便于大家理 ...
- 基于内容的图片检索CBIR(Content Based Image Retrieval)简介
传统的图像检索过程,先通过人工对图像进行文字标注,再利用关键字来检索图像,这种依据图像描述的字符匹配程度提供检索结果的方法,简称“以字找图”,既耗时又主观多义.基于内容的图像检索客服“以字找图”方式的 ...
- react之——render prop
在react “从上至下的数据流原则” 背景下,常规的消息传递机制就是通过prop属性,把父级数据传递给子级,这样一种数据流通模式决定了——数据的接收方子组件要被”硬植入“进数据的数据的给予方父组件, ...
- 【HEVC帧间预测论文】P1.7 Content Based Hierarchical Fast Coding Unit Decision Algorithm
Content Based Hierarchical Fast Coding Unit Decision Algorithm For HEVC <HEVC标准介绍.HEVC帧间预测论文笔记> ...
- React components render order All In One
React components render order All In One components render order / components lifecycle DOM tree ren ...
- React中render Props模式
React组件复用 React组件复用的方式有两种: 1.render Props模式 2.高阶组件HOC 上面说的这两种方式并不是新的APi. 而是利用Raect自身的编码特点,演化而来的固定编码写 ...
- 从DOM操作看Vue&React的前端组件化,顺带补齐React的demo
前言 接上文:谈谈我对前端组件化中“组件”的理解,顺带写个Vue与React的demo 上次写完博客后,有朋友反应第一内容有点深,看着迷迷糊糊:第二是感觉没什么使用场景,太过业务化,还不如直接写Vue ...
随机推荐
- js---05 自定义属性
<!DOCTYPE HTML> <html> <head> <meta http-equiv="Content-Type" content ...
- button-xml 中android:clickable="false" 属性
今天在做项目的时候,遇到了一个问题,就是需要把一个常按监听事件,加到一个linearlayout中,但是,这个linearlayout中有其他的button.textview等控件,这样就导致当我们常 ...
- A股借壳上市?暂时没戏
近期股市波动,让不少P2P概念股打回原型.同花顺数据显示,上周五P2P概念股整体下跌9.28%,其中除了5家上市公司停牌外,14家P2P概念股跌幅都超过了9%.此前大热的多伦股份自6月23日以来,股价 ...
- 如何监控和解决SQL Server的阻塞(1) (当前阻塞)
1. 什么是"阻塞"? 阻塞是SQL数据库应用"锁"机制的一个副作用.当一个应用请求针对某个数据库对象(例如全表,某行数据, 或者是某个数据页)加锁后,那么这个 ...
- unalias---取消命令别名
unalias命令用来取消命令别名,是为shell内建命令. 选项 -a:取消所有命令别名. 实例 使用unalias命令将已经设置的命令别名"cc"取消,输入如下命令: unal ...
- Day 3 EX 购物车自写
# -*- coding: utf_8 _*_# Author:Vi import copygoods = [0,[1,'iphone',20],[2,'ipad',2500]]salary = in ...
- python版 百度签到
经常玩贴吧,刚学python ,所以自己弄了一个python版的签到程序.自己的东西总是最好的. 登陆模块参考的http://www.crifan.com/emulate_login_website_ ...
- 【Educational Codeforces Round 36 A】 Garden
[链接] 我是链接,点我呀:) [题意] 在这里输入题意 [题解] 枚举用哪一个桶就好 [代码] #include <bits/stdc++.h> using namespace std; ...
- 浅谈架构之路:单点登录 SSO
前言:SSO 单点登录 "半吊子"的全栈工程师又来了,技术类的文章才发表了两篇,本来想先将主攻的几个系列都开个头(Nodejs.Java.前端.架构.全栈等等),无奈博客起步太晚, ...
- 洛谷 P2392 kkksc03考前临时抱佛脚
P2392 kkksc03考前临时抱佛脚 题目背景 kkksc03的大学生活非常的颓废,平时根本不学习.但是,临近期末考试,他必须要开始抱佛脚,以求不挂科. 题目描述 这次期末考试,kkksc03需要 ...