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

Question

我已经建立了 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 />

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

最好的事物，
阿列克萨

Answer 1

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

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

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