如何在React.js中实现基于JSON数据的实心/空心星级评分组件

直接给你可运行的代码，完美适配从JSON读取评分、显示实心/空心星星的需求：

import React from "react";
import { ReactComponent as Star } from "../assets/star.svg"; // 若用PNG可保留原后缀，SVG更适合颜色控制
import "../style/Stars.css";

// 组件接收评分和颜色属性，默认颜色用主题色#FF6060
function Stars({ rating, color = "#FF6060" }) {
  const totalStars = 5; // 固定总星星数，可根据需求修改
  // 计算实心星星数，做边界处理避免负数或超出总数
  const filledStars = Math.max(0, Math.min(rating, totalStars));
  const unfilledStars = totalStars - filledStars;

  return (
    <div className="stars-container">
      {/* 渲染实心星星 */}
      {[...Array(filledStars)].map((_, index) => (
        <Star 
          key={`filled-${index}`} 
          className="star filled" 
          style={{ fill: color }} 
          alt="实心星星" 
        />
      ))}
      {/* 渲染空心星星 */}
      {[...Array(unfilledStars)].map((_, index) => (
        <Star 
          key={`unfilled-${index}`} 
          className="star unfilled" 
          style={{ fill: "#E3E3E3" }} // 空心星星默认灰色，也可改为属性传入
          alt="空心星星" 
        />
      ))}
    </div>
  );
}

export default Stars;

配套的Stars.css示例（控制星星大小与间距）：

.stars-container {
  display: flex;
  gap: 0.5rem; /* 星星之间的间距 */
}

.star {
  width: 1.2rem;
  height: 1.2rem;
}

/* 若不想用内联样式，也可通过类名控制颜色 */
.star.filled {
  fill: #FF6060;
}

.star.unfilled {
  fill: #E3E3E3;
}

关键修改说明 #

1. Props接收修正：原代码直接写Stars(rating, color)是错误的，React组件属性是对象，必须用解构{ rating, color }获取。
2. 移除冗余状态/Ref：原代码里的useRef和useState完全没必要，评分是从JSON传入的属性，直接计算即可，无需本地维护状态。
3. 正确计算星星数量：固定总星星数为5，通过filledStars控制实心数量，unfilledStars控制空心数量，同时做边界处理避免异常值。
4. SVG组件正确使用：因为是用ReactComponent导入的SVG，直接用<Star />标签即可，这样才能通过fill属性控制颜色，不用img标签。
5. 颜色适配：支持传入自定义颜色，空心星星默认灰色，也可改为外部传入的属性。

父组件使用示例（从JSON读取评分） #

import Stars from "./Stars";
import logements from "../data/logements.json";

function LogementList() {
  return (
    <div>
      {logements.map((logement) => (
        <div key={logement.id}>
          <h3>{logement.title}</h3>
          <Stars rating={logement.rating} />
        </div>
      ))}
    </div>
  );
}

内容的提问来源于stack exchange，提问作者Fatou Mbacké DIALLO