React星级评分组件如何向父组件传值实现'X out of 5'输出

核心是通过React标准的回调传值+状态提升实现子组件向父组件传递评分数据，不需要额外引入第三方库。 #

问题根源 #

你当前把选中的评分rating作为状态存在StarRating组件内部，父组件无法直接访问子组件的内部状态，自然拿不到选中的评分值。 #

具体实现 #

1. 修改StarRating子组件 #

做3处调整：

• 接收父组件传入的2个props：当前选中评分值、评分变更的回调函数
• 悬停状态hover是组件内部临时交互态，不需要外传，依旧保留在子组件内部即可
• 修复原代码的语法问题：button标签同时写了class和className属性，JSX中统一用className设置类名，避免属性冲突

修改后的组件代码：

import React, { useState } from "react";

const StarRating = ({ selectedRating, onRatingChange }) => {
  // 仅悬停状态保留在组件内部
  const [hover, setHover] = useState(0);
  return (
    <div className="star-rating">
      {[...Array(5)].map((star, index) => {
        index += 1;
        return (
          <button
            type="button"
            key={index}
            className={`star ${index <= (hover || selectedRating) ? "on" : "off"}`}
            onClick={() => onRatingChange(index)}
            onMouseEnter={() => setHover(index)}
            onMouseLeave={() => setHover(selectedRating)}
          >
            <span className="star">&#9863;</span>
          </button>
        );
      })}
    </div>
  );
};

export default StarRating;

2. 父组件调用并展示评分 #

把评分状态提升到父组件管理，将状态值和更新函数通过props传给子组件，即可直接在父组件中拿到评分结果展示：

import React, { useState } from "react";
import StarRating from "./StarRating"; // 替换为你的组件实际存放路径

const RatingPage = () => {
  // 评分状态存在父组件，可全局使用
  const [rating, setRating] = useState(0);

  return (
    <div>
      <StarRating
        selectedRating={rating}
        onRatingChange={(newScore) => setRating(newScore)}
      />
      {/* 按要求格式展示评分结果 */}
      {rating > 0 && <p>{rating} out of 5 stars</p>}
    </div>
  );
};

export default RatingPage;

可选封装写法 #

如果你希望组件更独立，不想把评分状态完全提升到父组件，也可以保留子组件内部的rating状态，点击评分时同步调用父组件传入的回调传值即可：

const StarRating = ({ onRatingChange }) => {
  const [rating, setRating] = useState(0);
  const [hover, setHover] = useState(0);

  const handleRate = (index) => {
    setRating(index);
    // 父组件传了回调时才执行，避免报错
    onRatingChange?.(index);
  };

  return (
    <div className="star-rating">
      {[...Array(5)].map((star, index) => {
        index += 1;
        return (
          <button
            type="button"
            key={index}
            className={`star ${index <= (hover || rating) ? "on" : "off"}`}
            onClick={() => handleRate(index)}
            onMouseEnter={() => setHover(index)}
            onMouseLeave={() => setHover(rating)}
          >
            <span className="star">&#9863;</span>
          </button>
        );
      })}
    </div>
  );
};

这种写法父组件不需要管理状态，只需要传onRatingChange回调就能拿到评分，但缺点是父组件无法主动控制评分值（比如设置默认分、重置评分），根据业务场景选择即可。

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