React项目中如何将星级数字替换为FontAwesome星星图标

当前代码的问题 #

1. CSS的content属性仅对:before/:after伪元素生效，直接写在.star-rating类上不会生成星星图标
2. 现有写法仅修改了数字的颜色，没有实现“根据数字生成对应数量星星”的逻辑

方法一：动态生成星星DOM元素（最直观） #

直接根据data?.starRating的数值，循环生成对应数量的FontAwesome星星标签：

<div className="star-rating">
  {/* 生成对应数量的星星，无评分时显示0个 */}
  {Array.from({ length: data?.starRating || 0 }, (_, idx) => (
    <i key={idx} className="fas fa-star" />
  ))}
</div>

调整CSS（无需content，直接设置星星样式）：

.star-rating {
  float: right;
  width: 50%;
  margin-bottom: 1em;
  font-size: 1.5em;
}

.star-rating .fa-star {
  color: #FFD700;
}

方法二：CSS伪元素+变量实现（无多余DOM元素） #

如果不想生成多个DOM元素，可通过CSS变量控制星星显示比例：

<div 
  className="star-rating"
  {/* 将评分值传给CSS变量 */}
  style={{ '--rating': data?.starRating || 0 }}
></div>

对应的CSS：

.star-rating {
  float: right;
  width: 50%;
  margin-bottom: 1em;
  font-size: 1.5em;
  font-family: FontAwesome;
  color: #ccc; /* 灰色空星底色 */
  position: relative;
}

/* 生成5个灰色空星 */
.star-rating::before {
  content: "\f005\f005\f005\f005\f005";
}

/* 根据评分比例显示黄色实心星 */
.star-rating::after {
  content: "\f005\f005\f005\f005\f005";
  color: #FFD700;
  position: absolute;
  top: 0;
  left: 0;
  width: calc((var(--rating) / 5) * 100%);
  overflow: hidden;
}

内容的提问来源于stack exchange，提问作者SCOCB