时间戳

首页 > 解决方案 > 如何根据平均评分填写评论图标？

javascript - 如何根据平均评分填写评论图标？

问题描述

我已经建立了 NodeJS 和 React 项目。在项目中，每个用户都有自己的列表，每个列表都有自己的评论。现在我得到评论数，然后计算平均评论。现在我想将图标填充到我收到的任何平均数字。因此，例如，如果平均评论为 3，则将填充 3 星，而不会填充 2 星。我将星形图标作为一个组件，我唯一要做的就是isFilled={true}填充一个图标。

我如何获得平均评分：

// Get average number of all ratings
const arrAvg = arr => arr.reduce((a, b) => a + b, 0) / arr.length;
const getAvgRating =
  reviews.length > 0 ? arrAvg(reviews.map(review => review.attributes.rating)) : 0;
const avgRating = parseInt(getAvgRating); // This is my average review number

这是我的评论星形图标（我想根据平均评分的数量填充每个星形）：

 <IconReviewStar isFilled={true} /> // isFilled will mark icon as filled
 <IconReviewStar isFilled={true} />
 <IconReviewStar isFilled={true} />
 <IconReviewStar />
 <IconReviewStar />

有什么简单的解决方法吗？所以我可以省去编写不必要的代码。任何帮助都将意味着，即使它只是一篇可以为我指出正确答案的文章。

最好的，阿莱克萨

标签： javascriptreactjs

解决方案

尝试迭代并有条件地将道具渲染到您的avgRating.

const totalFilled = Math.ceil(avgRating);
const totalStars = 5;

const ReviewBar = () =>
  [...Array(totalStars).keys()].map((key) => (
    <IconReviewStar key={key} isFilled={key < totalFilled} />
  ));

推荐阅读