如何实现按1-5分评分数值重复渲染对应数量的星级icon

核心逻辑非常直接：因为已知评分数值是1-5的整数，只需要生成与评分数值等长的列表，遍历列表逐个渲染星级icon即可，不需要额外的复杂条件判断。

通用实现步骤 #

• 拿到传入的有效评分数值，范围固定为1-5
• 根据分数值生成对应长度的可遍历列表
• 遍历列表，为每一项渲染对应的星级icon节点
• 为每个生成的图标节点设置唯一标识，避免渲染错乱

不同技术栈的代码示例 #

原生JS DOM实现 #

适合无框架的普通页面场景：

// 替换为实际获取到的用户评分
const score = 3;
// 拿到渲染星级的父容器
const ratingWrap = document.querySelector('.star-container');
// 按评分次数循环生成星级节点
for (let i = 0; i < score; i++) {
  const starNode = document.createElement('img');
  // 替换为你本地的星级icon路径
  starNode.src = 'star-active.png';
  starNode.alt = '已点亮星级';
  ratingWrap.appendChild(starNode);
}

Vue 组件实现 #

适合Vue项目场景：

<template>
  <div class="star-container">
    <!-- 直接按评分次数遍历渲染，不需要手动创建数组 -->
    <img 
      v-for="item in score"
      :key="item"
      src="star-active.png"
      alt="已点亮星级"
    >
  </div>
</template>
<script setup>
// 直接接收传入的1-5评分数值即可
const score = 4;
</script>

React 组件实现 #

适合React项目场景：

function StarRating({ score }) {
  // 生成长度与评分相等的列表，映射生成星级节点
  const stars = Array.from({ length: score }, (_, idx) => (
    <img 
      key={idx}
      src="star-active.png"
      alt="已点亮星级"
    />
  ));
  return <div className="star-container">{stars}</div>
}
// 调用时传入1-5的评分即可，示例：<StarRating score={5} />

常见注意事项 #

• 遍历渲染多个重复图标时，一定要给每个节点设置唯一的key值，避免框架的虚拟DOM匹配异常
• 如果后续需要扩展半星、未点亮星的效果，只需要在遍历逻辑里根据当前项的位置判断渲染对应icon即可，现有循环逻辑可以完全复用

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