[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)

最新文章

热门文章