React-封装星星评价（支持半星、点击）拿来即用

矫情吗；* 2022-12-18 15:57 173阅读 0赞

# Ⅰ- 壹 - 功能展示和使用需求 #

![在这里插入图片描述][20201027114115906.png_pic_center]

### 一 需要安装styled-components ###

yarn add styled-components

### 二 用到的图标 ###

![在这里插入图片描述][20201027114652687.png_pic_center]  
![在这里插入图片描述][20201027114652683.png_pic_center]  
![在这里插入图片描述][20201027114652682.png_pic_center]

# Ⅱ - 贰 - 封装代码 #

### 一 创建文件Star.jsx ###

import React, {  Component } from 'react'
    
    import styled from "styled-components";
    import star0 from '@a/images/iconku/star0.png'
    import star1 from '@a/images/iconku/star1.png'
    import star2 from '@a/images/iconku/star2.png'
    
    
    const Boxs = styled.div` .star{ display: inline-block; } .star>span{ display: inline-block; width: .12rem; height:.12rem; background-size: .12rem .12rem; } .star0{ background-image: url(${ star0}); } .star1{ background-image: url(${ star1}); } .star2{ background-image: url(${ star2}); } `
    class Star extends Component{ 
        constructor(props){ 
            super(props);
            this.state={ 
                starNum:['star0','star0','star0','star0','star0'] //设置默认背景图
            }
      }
      onClickstrt = (index) => {  
        return () => {  
          this.props.onClickstar(index)
        }
      }
      
      componentWillReceiveProps(nextProps) { 
        console.log(this.props.star,nextProps, "componentWillReceiveProps");
      
          this.getStar(Math.round(nextProps.star) / 2 + 1); //将传过来的类似7.3数字进行四舍五入再除2，得到的是类似2,3.5,6这种值
    
    
      
        
      }
    
    
    
      componentDidMount() { 
        console.log(this.props.star,"componentDidMount");
          this.getStar(Math.round(this.props.star) / 2 + 1); //将传过来的类似7.3数字进行四舍五入再除2，得到的是类似2,3.5,6这种值
          
        }
        getStar(num){ 
            let newStar = this.state.starNum.map((item)=>{  //当num=3.5时遍历后newStar数组变成['star2','star2','star2','star1','star0','star0']
                --num;
                return num>=1?'star2':((num>0)?'star1':'star0'); //两次三目运算
            })
            this.setState({ 
                starNum:newStar  //设置state为遍历后的新数组
            })
        }
        render(){ 
          return (
            
            <Boxs>
              <span className="star">
                { 
                  this.props.isStarClick? this.state.starNum.map((item, index)=>{ 
                    return <span className={ item} onClick={ this.onClickstrt(index)} key={ index+item}></span>
                  }): this.state.starNum.map((item, index)=>{ 
                    return <span className={ item}  key={ index+item}></span>
                  })
                }
                
                { /* { this.state.starNum.map((item, index)=>{ return <span className={item} onClick={this.onClickstrt(index)} onChange={this.onChanges} key={index+item}></span> }) } */}
              </span>
              </Boxs>
            )
        }
    }
    export default Star;

### 二 使用 ###

在使用的地方导入

import Star from "@c/star/Star";

实例组件

*  可点击

<Star isStarClick={ true}  onClickstar={ (index) => this.setState({ stari:(index+1)*2})}  star={ this.state.stari}></Star>

*  常规

<Star isStarClick={ false}   star={ 6}></Star>
    
    
    ```javascript
        <div>
          <Star star={ 2.5} />
          <Star star={ 2} />
          <Star star={ 4.5} />
        </div>

参数详解

<table> 
 <thead> 
  <tr> 
   <th>参数</th> 
   <th>类型</th> 
   <th>详解</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td>star</td> 
   <td>number</td> 
   <td>高亮星星数</td> 
  </tr> 
  <tr> 
   <td>isStarClick</td> 
   <td>bool 是否开启点击高亮</td> 
   <td>（默认否）</td> 
  </tr> 
  <tr> 
   <td>onClickstar</td> 
   <td>Callback</td> 
   <td>开启点亮之后的回调</td> 
  </tr> 
 </tbody> 
</table>

[20201027114115906.png_pic_center]: /images/20221122/acccc65b489d470a8ea6856d1d155796.png
[20201027114652687.png_pic_center]: /images/20221122/f391d7f8c8b14277840b7b70d6c95438.png
[20201027114652683.png_pic_center]: /images/20221122/dd2dca7946164445aa80eb24e7d8821d.png
[20201027114652682.png_pic_center]: /images/20221122/45892d8ddf4745188d8ab219a5a4b98e.png