如何实现React可复用评分卡片组件的动态星级展示

核心实现思路 #

不用手动编写每个星级图片标签，而是根据传入的star参数生成对应长度的数组，通过遍历数组批量渲染图片即可。

React组件代码示例 #

function ReviewCard({ name, description, star }) {
  // 生成对应数量的空数组，用于循环渲染星星
  const starsList = Array(star).fill(null);

  return (
    <div className="review-card">
      <h3>{name}</h3>
      <p>{description}</p>
      <div className="star-group">
        {/* 遍历数组渲染星级图片，用索引作为key保证唯一性 */}
        {starsList.map((_, idx) => (
          <img 
            key={idx} 
            src="/assets/full-star.png" 
            alt="星级" 
            className="star-icon"
          />
        ))}
      </div>
    </div>
  );
}

// 调用组件时直接传入star参数
<ReviewCard 
  name="Bianca" 
  star={4} 
  description="这是一条模拟的用户评价内容" 
/>

进阶优化：支持半星显示 #

如果需要支持半星（比如star={4.5}），可以拆分整数和小数部分分别处理：

function ReviewCard({ name, description, star }) {
  const fullStarCount = Math.floor(star);
  const needHalfStar = star % 1 !== 0;
  const fullStars = Array(fullStarCount).fill(null);

  return (
    <div className="review-card">
      <h3>{name}</h3>
      <p>{description}</p>
      <div className="star-group">
        {fullStars.map((_, idx) => (
          <img 
            key={`full-${idx}`} 
            src="/assets/full-star.png" 
            alt="满星" 
            className="star-icon"
          />
        ))}
        {/* 存在小数部分时渲染半星 */}
        {needHalfStar && (
          <img 
            key="half" 
            src="/assets/half-star.png" 
            alt="半星" 
            className="star-icon"
          />
        )}
      </div>
    </div>
  );
}

注意事项 #

• 给每个图片元素添加唯一的key属性，避免React渲染警告
• 可以把星级图片路径抽成常量（比如const FULL_STAR_URL = '/assets/full-star.png'），方便后续统一修改
• 给星级容器添加CSS样式，控制星星之间的间距和整体排版

内容的提问来源于stack exchange，提问作者Jennifer De Goede