react星星评价展示组件，具体到小数点

可以将星星的渲染精确到小数位，和组件库中的组件不同，组件库中组件只可精确到一半，在很多项目中我们都需要进行精确到小数位

思路：传递数据发送给组件，组件进行计算,通过一张镂空星星的png图片将底层的颜色映射为星星形状，这样就可以将整颗星星的位置下的颜色占据百分百，小数部分通过百分比控制底部颜色占据星星的面积

样式就是这样

 

 组件一（父）

/**
 * 评分星星支持小数点的组件
 * @param {*} number 评分值
 * size 星星的个数，默认10个
 * highColor高亮星星的样式，默认#7300FF
 * defaultColor灰色星星的样式，默认#B6B6B6
 */
import React from 'react'
import CheckedStar from '../CheckedStar/index';
import './index.scss'

// 星星评价
function StarRate({ number=4.7, size = 5, highColor = '#ff9a0d', defaultColor = '#d1d1d1' }) {
  const numberTen = number * 10 * size// 处理成整数
  const firstNum = Math.floor(numberTen / 10 / size)// 获取整数部分
  const lastNum = numberTen % (size * 10)// 获取小数部分
  let starList = [] // 存储满星个数
  for (let i = 0; i < firstNum; i++) {
    starList.push(i)
  }
  let grayList = []//存储无星的个数
  let graySize = lastNum ? size - firstNum - 1 : size - firstNum
  for (let i = 0; i < graySize; i++) {
    grayList.push(i)
  }
  const starColorParams = { highColor, defaultColor }// 传递给子类的参数
  return (
    <div className='star-rate-box'>
      {starList.map((one,index) => {
        return <CheckedStar key={index} number={100} {...starColorParams} />
      })}
      {lastNum ? <CheckedStar number={lastNum} {...starColorParams} /> : null}
      {grayList.map((one,index) => {
        return <CheckedStar key={index+10} {...starColorParams} />
      })}
      <span style={{ paddingLeft: 8, color: highColor, fontSize: '0.13rem' }}>{number}</span>
    </div>
  )
}

export default StarRate

 组件二（子）

import React from 'react'
import './StarRate/index.scss'
// 星星评价子类
function  CheckedStar({number,highColor,defaultColor}){
    // console.log(number,highColor,defaultColor,123456);
    const backStyle=number?{
      backgroundColor:highColor,
      backgroundImage:`linear-gradient(90deg,${highColor} ${number}%,${defaultColor} 65%)`}:{background:defaultColor}
    return(
      <div className='checked-star-box'>
        <img src='/星星.png' alt=""/>
        <div className='color-star' style={backStyle}></div>
      </div>
    )
  }

export default CheckedStar

index.scss样式代码

.star-rate-box{
    // display: flex;
    // height: 10px;
    line-height: 1vh;
    .color-star{
        position: absolute;
        top: 1px;
        z-index: 1;
        width: 10px;
        height: 9px;
        background-color: #ff9a0d;
        background-image: linear-gradient(90deg,#ff9a0d 0%,#eee 0%);
    }
    .checked-star-box{
        position: relative;
        width: 10px;
        height: 10px;
        top:0px;
        margin-left: 2px;
        display: inline-block;
        img{
            position: absolute;
            z-index: 2;
            width: 10px;
            height: 10px;
        }
    }
}

组件的使用

import StarRate from './StarRate/index';

<StarRate/>