react方式实现rate组件

看到网上写的rate组件，要么是react的class方式，要么就是基于classNameList的增删改查，总感觉不太完美，于是趁周末自己撸了一个，可以直接拿到自己的页面去试，喜欢请点个赞哦

需求分解：默认全不点亮 ，右侧默认请选择评分，点击时，点击的那个小心心左边全部呈红色，鼠标经过小心心时，小心心呈红色，移出时，如果移入前有被点击，则回退到点击态，否则全不点亮:

import React, { useState } from 'react'

function Rate({ rateList, defaultRate }) {
  // 使用 useState 定义当前的 rate 状态、上一次点击的 rate 状态和是否有进行过点击的状态
  const [currentRate, setCurrentRate] = useState(defaultRate ? defaultRate : 0)
  const [lastClickedRate, setLastClickedRate] = useState(defaultRate ? defaultRate : 0)
  const [clicked, setClicked] = useState(false)

  // 根据当前 rate 和 clicked 状态，生成样式对象
  const getStyle = rate => {
    console.log('rate :>> ', rate)
    console.log('currentRate :>> ', currentRate)
    return clicked && rate <= currentRate ? { color: 'red' } : {}
  }

  // 点击事件处理函数，更新当前的 rate 状态、上一次点击的 rate 状态和 clicked 状态
  const handleClick = rate => {
    console.log('rate :>handleClick> ', rate)
    //  设置当前rate
    setCurrentRate(rate)
    // 设置上一次点击时的rate
    setLastClickedRate(rate)
    // 设置已经点击
    setClicked(true)
  }

  // 鼠标移入事件处理函数，更新当前的 rate 状态
  const handleMouseEnter = rate => {
    setCurrentRate(rate)
    console.log('rate :>setCurrentRate> ', rate)
  }

  // 鼠标移出事件处理函数，更新当前的 rate 状态为上一次点击的 rate 状态
  const handleMouseLeave = () => {
    setCurrentRate(lastClickedRate)
  }

  return (
    <div style={{ display: 'flex', margin: '200px 300px' }}>
      {/* 遍历 rateList，生成相应的 div 元素 */}
      {rateList.map((rate, index) => (
        <div
          key={index}
          style={{ paddingRight: '18px', ...getStyle(index + 1) }}
          onClick={() => handleClick(index + 1)}
          onMouseEnter={() => handleMouseEnter(index + 1)}
          onMouseLeave={handleMouseLeave}>
          ❤
        </div>
      ))}
      {/* 显示当前 rate 对应的名字 */}
      <div>{rateList[currentRate - 1] ? rateList[currentRate - 1] : '请选择评分'}</div>
    </div>
  )
}

export default Rate

以上。