React 封装星星评分组件

悠悠 2022-10-06 11:58 234阅读 0赞

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQzNDc3NzIx_size_16_color_FFFFFF_t_70_pic_center]  
实现的需求为传入对商品的评分数据，页面显示对应的星星个数。

#### 1. 准备三张对应不同评分的星星图片 ####

![在这里插入图片描述][9b4e2b848eb046b15d71bb2def19afb6.png_pic_center]  
![在这里插入图片描述][8cd1f39910b64f51e50bb4d5ad3981a8.png_pic_center]![在这里插入图片描述][20210613155541700.png_pic_center]

#### 2. 期望实现的效果 ####

这样的  
![在这里插入图片描述][20210613155651747.png]  
调用

#### 3. 对传入的数据进行处理 ####

我们需要得到评分的整数和小数部分

let wm_poi_score = this.props.score || '';
    let score = wm_poi_score.toString();
    let scoreArray = score.split('.');

如果传入 4.7 ，那么得到的 scoreArray 就是`['4', '7']`

#### 4. 根据数据计算对应的星星个数 ####

// 满星个数
    let fullstar = parseInt(scoreArray[0]);
    // 半星个数
    let halfstar = parseInt(scoreArray[1]) >= 5 ? 1 : 0;
    // 灰色星个数
    let nullstar = 5 - fullstar - halfstar;

#### 5. 根据星星个数，渲染组件 ####

ok，我们想要的效果就实现啦

#### 6. 手动评分 ####

![在这里插入图片描述][2021061319364415.gif_pic_center]

页面初次展示时，渲染 5 个灰色的星星。为每一个星星添加一个 click 事件。当点击之时，获取该星星所对应的下标 index，为其添加高亮的样式。

<div className="star-area">
      {this.renderStar()}
    </div>

doEva(i) { 
      this.setState({ 
        startIndex: i + 1
      });
    }
    
    renderStar() { 
      let array = []
      for (let i = 0; i < 5; i++) { 
        let cls = i >= this.state.startIndex ? "star-item" : "star-item light"
        array.push(
          <div onClick={ () => this.doEva(i)} key={ i} className={ cls}></div>
        )
      }
      return array
    }

完整代码

import React from 'react';
    import './StarScore.scss';
    
    // 渲染5颗星得分方法
    class StarScore extends React.Component { 
      renderScore() { 
        let wm_poi_score = this.props.score || '';
        let score = wm_poi_score.toString();
        let scoreArray = score.split('.');
        // 满星个数
        let fullstar = parseInt(scoreArray[0]);
        // 半星个数
        let halfstar = parseInt(scoreArray[1]) >= 5 ? 1 : 0;
        // 灰色星个数
        let nullstar = 5 - fullstar - halfstar;
        let starjsx = [];
    
        // 渲染满星
        for (let i = 0; i < fullstar; i++) { 
          starjsx.push(<div key={ i + 'full'} className="star fullstar"></div>)
        }
        // 渲染半星
        if (halfstar) { 
          for (let j = 0; j < halfstar; j++) { 
            starjsx.push(<div key={ j + 'half'} className="star halfstar"></div>)
          }
        }
        // 渲染灰色星
        if (nullstar) { 
          for (let k = 0; k < nullstar; k++) { 
            starjsx.push(<div key={ k + 'null'} className="star nullstar"></div>)
          }
        }
        return starjsx;
      }
      render() { 
        return <div className="star-score">{ this.renderScore()}</div>;
      }
    }
    
    export default StarScore;

StarScore.scss

.star-score { 
      .star { 
        width: 10px;
        height: 10px;
        float: left;
        background-size: cover;
      }
    
      .fullstar { 
        background-image: url('./img/fullstar.png');
      }
    
      .halfstar { 
        background-image: url('./img/halfstar.png');
      }
    
      .nullstar { 
        background-image: url('./img/gray-star.png');
      }
    }

import './Main.scss';
    import React from 'react';
    
    class Main extends React.Component { 
      constructor(props) { 
        super(props);
        }
      }
      
      /** * 点击评分 */
      doEva(i) { 
        this.setState({ 
          startIndex: i + 1
        });
      }
      /** * 渲染评分用的星 */
      renderStar() { 
        let array = []
        for (let i = 0; i < 5; i++) { 
          let cls = i >= this.state.startIndex ? "star-item" : "star-item light"
          array.push(
            <div onClick={ () => this.doEva(i)} key={ i} className={ cls}></div>
          )
        }
        return array
      }
      render() { 
        return (
          <div className="content">
            <div className="star-area">
                { this.renderStar()}
              </div>
          </div>
        );
      }
    }
    
    export default Main;

.content { 
      height: 100%; .eva-content { 
        background-color: #fff;
        overflow: hidden;
        margin: px2rem(10px);
        margin-top: px2rem(74px);
      }
      .star-area { 
        text-align: center;
        margin-top: px2rem(30px);
      }
      .star-item { 
        width: px2rem(32px);
        height: px2rem(32px);
        background-image: url('./img/gray-star.png');
        background-size: cover;
        display: inline-block;
        margin-right: px2rem(10px); &.light { 
          background-image: url('./img/light-star.png');
        }
      }
    }

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQzNDc3NzIx_size_16_color_FFFFFF_t_70_pic_center]: /images/20221005/2be6a4843c074ac2bcf8d666dbe5f985.png
[9b4e2b848eb046b15d71bb2def19afb6.png_pic_center]: /images/20221005/b16037055bd9453890a9f8f0a94bde88.png
[8cd1f39910b64f51e50bb4d5ad3981a8.png_pic_center]: https://img-blog.csdnimg.cn/img_convert/8cd1f39910b64f51e50bb4d5ad3981a8.png#pic_center
[20210613155541700.png_pic_center]: /images/20221005/88fff8800924401f87b12d08b8e0f9bc.png
[20210613155651747.png]: /images/20221005/17e8ce77e8d04a7089096ce2d7a9ad98.png
[2021061319364415.gif_pic_center]: /images/20221005/3b3396d530f04547bd4ee996152b007a.png