react实现星星评分

实现星星评分组件

使用React实现一个可交互的星星评分组件，可以通过状态管理用户选择的评分值。

import React, { useState } from 'react';

const StarRating = ({ totalStars = 5 }) => {
  const [selectedStars, setSelectedStars] = useState(0);
  const [hoveredStars, setHoveredStars] = useState(0);

  return (
    <div className="star-rating">
      {[...Array(totalStars)].map((_, index) => {
        const starValue = index + 1;
        return (
          <span
            key={starValue}
            className={`star ${starValue <= (hoveredStars || selectedStars) ? 'filled' : ''}`}
            onClick={() => setSelectedStars(starValue)}
            onMouseEnter={() => setHoveredStars(starValue)}
            onMouseLeave={() => setHoveredStars(0)}
          >
            ★
          </span>
        );
      })}
      <p>当前评分: {selectedStars} / {totalStars}</p>
    </div>
  );
};

export default StarRating;

添加样式增强视觉效果

为星星评分组件添加CSS样式，提升用户体验。

.star-rating {
  font-size: 24px;
  display: inline-flex;
}

.star {
  cursor: pointer;
  color: #ccc;
  transition: color 0.2s;
  margin-right: 4px;
}

.star.filled {
  color: #ffc107;
}

.star:hover {
  transform: scale(1.2);
}

支持自定义颜色和大小

扩展组件使其支持自定义颜色和大小属性。

const StarRating = ({ 
  totalStars = 5,
  starColor = '#ffc107',
  emptyColor = '#ccc',
  size = 24 
}) => {
  // ...之前的state逻辑

  return (
    <div className="star-rating" style={{ fontSize: `${size}px` }}>
      {[...Array(totalStars)].map((_, index) => {
        const starValue = index + 1;
        return (
          <span
            key={starValue}
            style={{
              color: starValue <= (hoveredStars || selectedStars) 
                ? starColor 
                : emptyColor
            }}
            className="star"
            // ...事件处理器保持不变
          >
            ★
          </span>
        );
      })}
    </div>
  );
};

添加只读模式

为组件添加只读模式，适用于展示评分而非交互场景。

const StarRating = ({ 
  totalStars = 5,
  rating = 0,
  interactive = true,
  // ...其他props
}) => {
  // ...state逻辑仅在interactive模式下使用
  const [selectedStars, setSelectedStars] = useState(rating);
  const [hoveredStars, setHoveredStars] = useState(0);

  return (
    <div className="star-rating" style={{ fontSize: `${size}px` }}>
      {[...Array(totalStars)].map((_, index) => {
        const starValue = index + 1;
        return (
          <span
            key={starValue}
            style={{
              color: starValue <= (interactive 
                ? (hoveredStars || selectedStars) 
                : rating) 
                ? starColor 
                : emptyColor,
              cursor: interactive ? 'pointer' : 'default'
            }}
            className="star"
            onClick={interactive ? () => setSelectedStars(starValue) : null}
            onMouseEnter={interactive ? () => setHoveredStars(starValue) : null}
            onMouseLeave={interactive ? () => setHoveredStars(0) : null}
          >
            ★
          </span>
        );
      })}
    </div>
  );
};

使用SVG实现更精确的星星形状

替换Unicode字符★为SVG实现更精确的星星形状。

const StarIcon = ({ filled, color, emptyColor }) => (
  <svg
    width="1em"
    height="1em"
    viewBox="0 0 24 24"
    fill={filled ? color : emptyColor}
    stroke={color}
    strokeWidth="1"
  >
    <polygon
      points="12 2 15.09 8.26 22 9.27 17 14.14 18.18 21.02 12 17.77 5.82 21.02 7 14.14 2 9.27 8.91 8.26 12 2"
    />
  </svg>
);

// 在StarRating组件中使用StarIcon替换★字符
<span
  key={starValue}
  // ...其他props
>
  <StarIcon 
    filled={starValue <= (hoveredStars || selectedStars)} 
    color={starColor}
    emptyColor={emptyColor}
  />
</span>

添加评分变化回调

当用户选择评分时触发回调函数。

const StarRating = ({
  onRatingChange = () => {},
  // ...其他props
}) => {
  const handleStarClick = (starValue) => {
    setSelectedStars(starValue);
    onRatingChange(starValue);
  };

  // 在star的onClick中使用handleStarClick替代直接setState
  onClick={interactive ? () => handleStarClick(starValue) : null}
};