如何在React的map方法中实现星级评分的循环渲染

在React中，JSX语法内无法直接使用for循环，我们可以通过生成元素数组的方式，实现和你PHP代码完全一致的星级展示效果：

完整实现代码 #

{reviews.map((r, reviewIndex) => (
  <div key={reviewIndex}>
    <div className="stars">
      {/* 渲染高亮的星级（对应PHP第一个for循环） */}
      {Array.from({ length: r.stars }, (_, starIndex) => (
        <span key={`filled-star-${reviewIndex}-${starIndex}`}>★</span>
      ))}
      {/* 渲染灰色的星级（对应PHP第二个for循环） */}
      {Array.from({ length: 5 - r.stars }, (_, starIndex) => (
        <span key={`grey-star-${reviewIndex}-${starIndex}`} className="greyed">★</span>
      ))}
    </div>
  </div>
))}

逻辑说明 #

• 遍历记录：用reviews.map()替代PHP的foreach ($foo as $bar)，遍历每条评分记录。
• 高亮星星：Array.from({ length: r.stars })生成一个长度等于当前评分的数组，遍历数组渲染对应数量的<span>标签，对应PHP中for ($x = 1; $x <= $stars; $x++)的逻辑。
• 灰色星星：Array.from({ length: 5 - r.stars })生成剩余未评分的星星数量的数组，渲染带greyed类的灰色星星，对应PHP中for ($x = 1; $x <= 5 - $stars; $x++)的逻辑。
• key属性：为每个列表元素添加唯一key，这是React列表渲染的要求，避免控制台警告。

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