React支持十分位小数评分组件的高效实现方案咨询

要实现精确到十分位的圆形评分（比如4.2分对应4个全满圆+第五个圆20%填充），有几种比你之前尝试的span+SVG遮罩更简洁高效的方案，下面是具体实现思路和代码：

方案一：CSS Mask 结合动态宽度（推荐） #

这个方案纯CSS+React状态就能搞定，不需要额外资源，性能好且易维护。

思路 #

先渲染一层空心圆形作为底色，再在上方叠一层实心圆形的填充层，通过动态控制填充层的宽度+overflow: hidden来截断显示范围，自动实现部分填充的效果。

代码实现 #

import { useState } from 'react';

// 可复用的评分组件
const Rating = ({ score = 0, maxScore = 5, circleSize = 24, gap = 8 }) => {
  // 计算填充层宽度：(当前分数/满分)*100%
  const fillWidth = `${(score / maxScore) * 100}%`;

  return (
    <div 
      className="rating-container"
      style={{ '--circle-size': `${circleSize}px`, '--gap': `${gap}px` }}
    >
      {/* 底层空心圆 */}
      <div className="rating-base">
        {[...Array(maxScore)].map((_, idx) => (
          <span key={`base-${idx}`} className="rating-circle"></span>
        ))}
      </div>
      {/* 上层填充层，通过宽度控制显示范围 */}
      <div className="rating-fill" style={{ width: fillWidth }}>
        {[...Array(maxScore)].map((_, idx) => (
          <span key={`fill-${idx}`} className="rating-circle filled"></span>
        ))}
      </div>
    </div>
  );
};

// 对应的CSS（可以放在全局样式或CSS Module中）
/*
.rating-container {
  position: relative;
  display: inline-flex;
  gap: var(--gap);
}

.rating-circle {
  width: var(--circle-size);
  height: var(--circle-size);
  border-radius: 50%;
}

.rating-base .rating-circle {
  border: 2px solid #e0e0e0;
}

.rating-fill {
  position: absolute;
  top: 0;
  left: 0;
  display: inline-flex;
  gap: var(--gap);
  overflow: hidden;
}

.rating-fill .rating-circle.filled {
  background-color: #ffc107;
  border: none;
}
*/

优势 #

• 代码极简，逻辑清晰，不需要处理复杂的坐标计算
• 性能优异，没有额外的DOM节点或SVG渲染开销
• 支持自定义圆形大小、间距、颜色，扩展性强

方案二：SVG 原生绘制（矢量无失真） #

如果需要适配高清屏幕或自定义复杂的圆形样式（比如渐变填充），SVG方案是更好的选择，纯矢量渲染不会出现模糊。

思路 #

用SVG的clipPath定义所有圆形的区域，然后用一个矩形作为填充，通过动态设置矩形宽度来控制填充比例，矩形只会在clipPath的圆形区域内显示，自动实现部分填充。

代码实现 #

const RatingSVG = ({ score = 0, maxScore = 5, circleSize = 24, gap = 8 }) => {
  const totalWidth = maxScore * circleSize + (maxScore - 1) * gap;
  // 计算填充矩形的宽度
  const fillWidth = (score / maxScore) * totalWidth;

  return (
    <svg 
      width={totalWidth} 
      height={circleSize} 
      viewBox={`0 0 ${totalWidth} ${circleSize}`}
    >
      {/* 绘制底层空心圆 */}
      {[...Array(maxScore)].map((_, idx) => {
        const x = idx * (circleSize + gap) + circleSize / 2;
        return (
          <circle
            key={`base-${idx}`}
            cx={x}
            cy={circleSize / 2}
            r={circleSize / 2 - 2}
            stroke="#e0e0e0"
            strokeWidth="2"
            fill="none"
          />
        );
      })}
      {/* 定义圆形裁剪路径 */}
      <clipPath id="rating-clip">
        {[...Array(maxScore)].map((_, idx) => {
          const x = idx * (circleSize + gap) + circleSize / 2;
          return (
            <circle
              key={`clip-${idx}`}
              cx={x}
              cy={circleSize / 2}
              r={circleSize / 2 - 2}
            />
          );
        })}
      </clipPath>
      {/* 填充矩形，仅在裁剪路径内显示 */}
      <rect
        x="0"
        y="0"
        width={fillWidth}
        height={circleSize}
        fill="#ffc107"
        clipPath="url(#rating-clip)"
      />
    </svg>
  );
};

优势 #

• 纯矢量渲染，缩放无失真，适配各种屏幕分辨率
• 支持复杂的填充效果（比如线性渐变、径向渐变）
• 不需要依赖CSS，可直接嵌入React组件

方案对比 #

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