React自定义图标评分组件开发求助：鼠标交互功能实现

我看了你的代码，核心问题在于自定义组件部分没有正确传递交互所需的状态和事件，而且原来的DOM操作逻辑没法适配自定义图标。咱们一步步来修复这个问题：

核心问题分析 #

1. CustomComponent 只是简单调用传入的 ratingComponent，但没有传递任何交互事件、评分状态或标识值，导致自定义图标完全无法响应鼠标操作。
2. 原来的事件处理函数依赖DOM元素的 className 和 dataset，这种直接操作DOM的方式不够灵活，没法适配自定义组件的样式控制。

解决方案步骤 #

1. 重构状态逻辑，用状态跟踪交互状态 #

在 Rating 组件里新增一个状态来跟踪鼠标悬停的评分值，替代直接操作DOM的方式：

const [hoverRating, setHoverRating] = React.useState(null);

2. 修改事件处理函数，基于状态而非DOM操作 #

更新 handleMouseOver、handleMouseOut，让它们操作状态而不是直接修改DOM样式：

const handleMouseOver = (value) => {
  setHoverRating(value);
};

const handleMouseOut = () => {
  setHoverRating(null);
};

3. 让自定义组件接收必要的Props #

自定义图标组件需要知道自己是否应该被填充、对应的评分值，以及要绑定的交互事件。所以我们要给 ratingComponent 传递这些关键Props：

• isFilled: 判断当前图标是否处于填充状态
• value: 当前图标的评分值
• onMouseOver: 鼠标悬停事件
• onMouseOut: 鼠标移出事件
• onClick: 点击事件

4. 修复CustomComponent的渲染逻辑 #

修改 CustomComponent，正确传递这些Props给每个自定义图标：

const CustomComponent = ({ currentRating, hoverRating, handleMouseOut, handleMouseOver, handleStarClick, totalRating, ratingComponent }) => {
  return (
    <div className="rating" onMouseOut={handleMouseOut}>
      {[...Array(+totalRating).keys()].map(n => {
        const value = n + 1;
        const isFilled = (hoverRating || currentRating) >= value;
        return ratingComponent({
          key: value,
          isFilled,
          value,
          onMouseOver: () => handleMouseOver(value),
          onMouseOut: handleMouseOut,
          onClick: () => handleStarClick(value)
        });
      })}
    </div>
  );
};

5. 调整DefaultComponent适配新逻辑 #

同时也要更新默认的星星组件，用状态判断填充状态，替代原来的DOM操作：

const DefaultComponent = ({ currentRating, hoverRating, handleMouseOut, handleMouseOver, handleStarClick, totalRating }) => {
  return (
    <div className="rating" onMouseOut={handleMouseOut}>
      {[...Array(+totalRating).keys()].map(n => {
        const value = n + 1;
        const isFilled = (hoverRating || currentRating) >= value;
        return (
          <span
            className={`star ${isFilled ? 'filled' : ''}`}
            key={value}
            onMouseOver={() => handleMouseOver(value)}
            onClick={() => handleStarClick(value)}
          >
            &#9733;
          </span>
        );
      })}
    </div>
  );
};

6. 更新Rating组件的主逻辑 #

把新增的 hoverRating 状态传递给子组件，同时修改 handleStarClick 直接接收评分值：

const handleStarClick = (rating) => {
  setCurrentRating(rating);
  onClick?.(rating);
};

完整修改后的代码 #

import React from "react";

const DefaultComponent = ({ currentRating, hoverRating, handleMouseOut, handleMouseOver, handleStarClick, totalRating }) => {
  return (
    <div className="rating" onMouseOut={handleMouseOut}>
      {[...Array(+totalRating).keys()].map(n => {
        const value = n + 1;
        const isFilled = (hoverRating || currentRating) >= value;
        return (
          <span
            className={`star ${isFilled ? 'filled' : ''}`}
            key={value}
            onMouseOver={() => handleMouseOver(value)}
            onClick={() => handleStarClick(value)}
          >
            &#9733;
          </span>
        );
      })}
    </div>
  );
};

const CustomComponent = ({ currentRating, hoverRating, handleMouseOut, handleMouseOver, handleStarClick, totalRating, ratingComponent }) => {
  return (
    <div className="rating" onMouseOut={handleMouseOut}>
      {[...Array(+totalRating).keys()].map(n => {
        const value = n + 1;
        const isFilled = (hoverRating || currentRating) >= value;
        return ratingComponent({
          key: value,
          isFilled,
          value,
          onMouseOver: () => handleMouseOver(value),
          onMouseOut: handleMouseOut,
          onClick: () => handleStarClick(value)
        });
      })}
    </div>
  );
};

const Rating = props => {
  const { totalRating = 5, onClick, ratingComponent } = props;
  const [currentRating, setCurrentRating] = React.useState(0);
  const [hoverRating, setHoverRating] = React.useState(null);

  const handleMouseOver = (value) => {
    setHoverRating(value);
  };

  const handleMouseOut = () => {
    setHoverRating(null);
  };

  const handleStarClick = (rating) => {
    setCurrentRating(rating);
    onClick?.(rating);
  };

  return (
    <>
      {ratingComponent ? (
        <CustomComponent
          currentRating={currentRating}
          hoverRating={hoverRating}
          handleMouseOut={handleMouseOut}
          handleMouseOver={handleMouseOver}
          handleStarClick={handleStarClick}
          totalRating={totalRating}
          ratingComponent={ratingComponent}
        />
      ) : (
        <DefaultComponent
          currentRating={currentRating}
          hoverRating={hoverRating}
          handleMouseOut={handleMouseOut}
          handleMouseOver={handleMouseOver}
          handleStarClick={handleStarClick}
          totalRating={totalRating}
        />
      )}
    </>
  );
};

export default Rating;

如何使用自定义图标组件 #

你可以传入一个接收 isFilled 等Props的SVG组件，比如：

const CustomGemIcon = ({ isFilled, onMouseOver, onMouseOut, onClick }) => {
  return (
    <svg
      width="24"
      height="24"
      viewBox="0 0 24 24"
      fill={isFilled ? "#FDC60A" : "#444"}
      onMouseOver={onMouseOver}
      onMouseOut={onMouseOut}
      onClick={onClick}
      style={{ cursor: 'pointer' }}
    >
      {/* 这里是你的宝石SVG路径 */}
      <path d="M12 2L9 8H5l4 4-4 4h4l3 6 3-6h4l-4-4 4-4h-4l-3-6z"/>
    </svg>
  );
};

// 使用时
<Rating totalRating={5} ratingComponent={CustomGemIcon} onClick={(rating) => console.log(rating)} />

补充样式建议 #

给默认星星组件加个简单的样式，让填充状态更明显：

.rating {
  display: flex;
  gap: 8px;
}

.star {
  font-size: 24px;
  color: #444;
  cursor: pointer;
  transition: color 0.2s;
}

.star.filled {
  color: #FDC60A;
}

这样修改后，不管是默认星星还是自定义图标，都能完美支持鼠标悬停、移出和点击交互了，而且逻辑更清晰，也更符合React的状态管理思路。

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