经验首页 前端设计 程序设计 Java相关 移动开发 数据库/运维 软件/图像 大数据/云计算 其他经验
当前位置:技术经验 » JS/JS库/框架 » React » 查看文章
React星星评分组件的实现
来源:jb51  时间:2021/6/15 11:27:55  对本文有异议

实现的需求为传入对商品的评分数据,页面显示对应的星星个数。

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

在这里插入图片描述
在这里插入图片描述在这里插入图片描述

2. 期望实现的效果

这样的

在这里插入图片描述

调用

  1. <StarScore score={data.wm_poi_score}/>

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

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

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

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

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

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

5. 根据星星个数,渲染组件

  1. let starjsx = [];
  2. // 渲染满星
  3. for (let i = 0; i < fullstar; i++) {
  4. starjsx.push(<div key={i + 'full'} className="star fullstar"></div>)
  5. }
  6. // 渲染半星
  7. if (halfstar) {
  8. for (let j = 0; j < halfstar; j++) {
  9. starjsx.push(<div key={j + 'half'} className="star halfstar"></div>)
  10. }
  11. }
  12. // 渲染灰色星
  13. if (nullstar) {
  14. for (let k = 0; k < nullstar; k++) {
  15. starjsx.push(<div key={k + 'null'} className="star nullstar"></div>)
  16. }
  17. }

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

6. 手动评分

在这里插入图片描述

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

  1. <div className="star-area">
  2. {this.renderStar()}
  3. </div>
  1. doEva(i) {
  2. this.setState({
  3. startIndex: i + 1
  4. });
  5. }
  6.  
  7. renderStar() {
  8. let array = []
  9. for (let i = 0; i < 5; i++) {
  10. let cls = i >= this.state.startIndex ? "star-item" : "star-item light"
  11. array.push(
  12. <div onClick={() => this.doEva(i)} key={i} className={cls}></div>
  13. )
  14. }
  15. return array
  16. }

完整代码

  1. import React from 'react';
  2. import './StarScore.scss';
  3.  
  4. // 渲染5颗星得分方法
  5. class StarScore extends React.Component {
  6. renderScore() {
  7. let wm_poi_score = this.props.score || '';
  8. let score = wm_poi_score.toString();
  9. let scoreArray = score.split('.');
  10. // 满星个数
  11. let fullstar = parseInt(scoreArray[0]);
  12. // 半星个数
  13. let halfstar = parseInt(scoreArray[1]) >= 5 ? 1 : 0;
  14. // 灰色星个数
  15. let nullstar = 5 - fullstar - halfstar;
  16. let starjsx = [];
  17.  
  18. // 渲染满星
  19. for (let i = 0; i < fullstar; i++) {
  20. starjsx.push(<div key={i + 'full'} className="star fullstar"></div>)
  21. }
  22. // 渲染半星
  23. if (halfstar) {
  24. for (let j = 0; j < halfstar; j++) {
  25. starjsx.push(<div key={j + 'half'} className="star halfstar"></div>)
  26. }
  27. }
  28. // 渲染灰色星
  29. if (nullstar) {
  30. for (let k = 0; k < nullstar; k++) {
  31. starjsx.push(<div key={k + 'null'} className="star nullstar"></div>)
  32. }
  33. }
  34. return starjsx;
  35. }
  36. render() {
  37. return <div className="star-score">{this.renderScore()}</div>;
  38. }
  39. }
  40.  
  41. export default StarScore;

StarScore.scss

  1. .star-score {
  2. .star {
  3. width: 10px;
  4. height: 10px;
  5. float: left;
  6. background-size: cover;
  7. }
  8.  
  9. .fullstar {
  10. background-image: url('./img/fullstar.png');
  11. }
  12.  
  13. .halfstar {
  14. background-image: url('./img/halfstar.png');
  15. }
  16.  
  17. .nullstar {
  18. background-image: url('./img/gray-star.png');
  19. }
  20. }
  1. import './Main.scss';
  2. import React from 'react';
  3.  
  4. class Main extends React.Component {
  5. constructor(props) {
  6. super(props);
  7. }
  8. }
  9. /**
  10. * 点击评分
  11. */
  12. doEva(i) {
  13. this.setState({
  14. startIndex: i + 1
  15. });
  16. }
  17. /**
  18. * 渲染评分用的星
  19. */
  20. renderStar() {
  21. let array = []
  22. for (let i = 0; i < 5; i++) {
  23. let cls = i >= this.state.startIndex ? "star-item" : "star-item light"
  24. array.push(
  25. <div onClick={() => this.doEva(i)} key={i} className={cls}></div>
  26. )
  27. }
  28. return array
  29. }
  30. render() {
  31. return (
  32. <div className="content">
  33. <div className="star-area">
  34. {this.renderStar()}
  35. </div>
  36. </div>
  37. );
  38. }
  39. }
  40.  
  41. export default Main;
  1. .content {
  2. height: 100%;
  3. .eva-content {
  4. background-color: #fff;
  5. overflow: hidden;
  6. margin: px2rem(10px);
  7. margin-top: px2rem(74px);
  8. }
  9. .star-area {
  10. text-align: center;
  11. margin-top: px2rem(30px);
  12. }
  13. .star-item {
  14. width: px2rem(32px);
  15. height: px2rem(32px);
  16. background-image: url('./img/gray-star.png');
  17. background-size: cover;
  18. display: inline-block;
  19. margin-right: px2rem(10px);
  20.  
  21. &.light {
  22. background-image: url('./img/light-star.png');
  23. }
  24. }
  25. }

到此这篇关于React星星评分组件的实现的文章就介绍到这了,更多相关React星星评分内容请搜索w3xue以前的文章或继续浏览下面的相关文章希望大家以后多多支持w3xue!

 友情链接:直通硅谷  点职佳  北美留学生论坛

本站QQ群:前端 618073944 | Java 606181507 | Python 626812652 | C/C++ 612253063 | 微信 634508462 | 苹果 692586424 | C#/.net 182808419 | PHP 305140648 | 运维 608723728

W3xue 的所有内容仅供测试,对任何法律问题及风险不承担任何责任。通过使用本站内容随之而来的风险与本站无关。
关于我们  |  意见建议  |  捐助我们  |  报错有奖  |  广告合作、友情链接(目前9元/月)请联系QQ:27243702 沸活量
皖ICP备17017327号-2 皖公网安备34020702000426号