react实现星级评分

实现星级评分的基本思路

使用React实现星级评分通常涉及状态管理、事件处理和动态渲染。核心逻辑包括跟踪当前评分和悬停状态，通过图标或文字展示星级。

使用状态管理评分

创建组件并初始化状态，存储当前评分和悬停时的临时评分：

const [rating, setRating] = useState(0);
const [hover, setHover] = useState(0);

渲染星级图标

利用数组映射生成5颗星，根据状态决定是否填充为实心或空心：

{[...Array(5)].map((_, index) => {
  const starValue = index + 1;
  return (
    <button
      key={starValue}
      onClick={() => setRating(starValue)}
      onMouseEnter={() => setHover(starValue)}
      onMouseLeave={() => setHover(0)}
    >
      {starValue <= (hover || rating) ? '★' : '☆'}
    </button>
  );
})}

添加样式和交互反馈

为星级按钮添加CSS样式增强视觉效果，例如调整颜色和大小：

button {
  background: none;
  border: none;
  font-size: 24px;
  color: #ffc107;
  cursor: pointer;
}

支持自定义图标和大小

通过props允许传入自定义图标组件或调整星级大小：

const StarRating = ({ size = 24, activeColor = '#ffc107', inactiveColor = '#ccc' }) => {
  // 使用传入的样式参数
};

完整组件示例

整合上述逻辑的完整组件代码：

import React, { useState } from 'react';

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

  return (
    <div>
      {[...Array(5)].map((_, index) => {
        const starValue = index + 1;
        return (
          <button
            key={starValue}
            onClick={() => setRating(starValue)}
            onMouseEnter={() => setHover(starValue)}
            onMouseLeave={() => setHover(0)}
            style={{
              background: 'none',
              border: 'none',
              fontSize: '24px',
              color: starValue <= (hover || rating) ? '#ffc107' : '#ccc',
              cursor: 'pointer',
            }}
          >
            {starValue <= (hover || rating) ? '★' : '☆'}
          </button>
        );
      })}
    </div>
  );
};

export default StarRating;

扩展功能

增加半星评分支持需修改渲染逻辑，例如使用字体图标库或SVG实现半星显示：

// 示例使用react-icons库
import { FaStar, FaStarHalfAlt, FaRegStar } from 'react-icons/fa';

// 根据评分值决定显示全星、半星或空星
const renderStar = (index, rating) => {
  if (index < rating) {
    return index + 0.5 === rating ? <FaStarHalfAlt /> : <FaStar />;
  }
  return <FaRegStar />;
};

注意事项

确保组件可访问性，为按钮添加ARIA标签：

<button
  aria-label={`Rate ${starValue} star${starValue !== 1 ? 's' : ''}`}
>

以上方案可根据实际需求调整，如添加动画效果、禁用状态或与表单库集成。