React项目中基于JSON数值实现多状态圆形评分展示的问题

核心逻辑说明 #

• 分值判断：若传入分值为-1，直接返回null不渲染评分组件
• 填充规则换算：每2分对应1个全填充橙色圆形，满8分对应4个全填充圆；分值为奇数时额外加1个半填充橙色圆形，分值为9时刚好对应4全1半的要求
• 数量计算：
  • 全填充圆数量：Math.floor(score / 2)
  • 半填充圆数量：score % 2 === 1 ? 1 : 0
  • 空灰色圆数量：5 - 全填充圆数量 - 半填充圆数量

代码实现 #

首先封装独立的评分圆形渲染组件：

// 传入score参数为单个评分项的分值
const RatingCircles = ({ score }) => {
  if (score === -1) return null;
  const fullCount = Math.floor(score / 2);
  const hasHalf = score % 2 === 1;
  const emptyCount = 5 - fullCount - (hasHalf ? 1 : 0);
  
  return (
    <Circles>
      {/* 渲染全填充圆 */}
      {Array.from({ length: fullCount }).map((_, i) => (
        <FullCircleRating key={`full-${i}`} circles={circlesValue} />
      ))}
      {/* 渲染半填充圆 */}
      {hasHalf && <HalfCircleRating key="half" />}
      {/* 渲染空灰色圆 */}
      {Array.from({ length: emptyCount }).map((_, i) => (
        <CircleRating key={`empty-${i}`} />
      ))}
    </Circles>
  );
};

遍历JSON中的所有评分项调用组件即可：

// 假设接口返回的JSON数据存在data变量中
const { rating } = data.result;

// 渲染所有评分
{Object.values(rating).map((score, index) => (
  <div key={`rating-${index}`}>
    <RatingCircles score={score} />
  </div>
))}

可选优化：合并重复的样式组件 #

你当前定义的三个圆形组件逻辑高度重合，可以合并为一个减少冗余代码：

const Circle = styled.div`
  background: grey;
  border-radius: 100%;
  display: inline-block;
  height: 15px;
  width: 15px;
  overflow: hidden;
  position: relative;
  &::after {
    content: "";
    position: absolute;
    display: block;
    height: 100%;
    left: 0;
    background: orange;
    width: ${props => props.fill || 0};
  }
`;
// 调用方式：<Circle fill="100%" /> 全填充，<Circle fill="50%" />半填充，<Circle />空灰色圆

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