React星星评分组件的实现
更新时间：2021年06月15日 10:48:25 作者：淘淘是只狗
评分插件在购物的应用中经常可以看得到，但是用着别人的总是没有自己写的顺手，本文就使用React实现星星评分组件，感兴趣的可以了解一下
实现的需求为传入对商品的评分数据，页面显示对应的星星个数。
1. 准备三张对应不同评分的星星图片
2. 期望实现的效果
这样的
调用
<StarScore score={data.wm_poi_score}/>
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. 根据星星个数，渲染组件
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>)
}
}
ok，我们想要的效果就实现啦
6. 手动评分
页面初次展示时，渲染 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');
}
}
}
到此这篇关于React星星评分组件的实现的文章就介绍到这了,更多相关React星星评分内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！
相关文章
本篇文章主要介绍了尝试自己动手用react来写一个分页组件(小结)，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2018-02-02
这篇文章主要为大家介绍了React Native与iOS OC之间的交互示例详解，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪2023-07-07
这篇文章主要为大家介绍了React的createElement方法源码解析，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪2022-09-09
下面小编就为大家带来一篇react.js CMS 删除功能的实现方法。小编觉得挺不错的，现在就分享给大家，也给大家做个参考。一起跟随小编过来看看吧2017-04-04
在React中，用户登录功能是一个常见的需求，为了实现该功能，需要对用户输入的用户名和密码进行验证，并将验证结果保存到应用程序状态中，在React中，可以使用Redux Toolkit来管理应用程序状态，从而实现用户登录功能，需要详细了解可以参考下文2023-05-05
在当前的Web开发中,使用React构建单页面应用（SPA）已经成为一种常见的做法,然而,当应用程序遇到错误时,有可能会导致整个页面崩溃,给用户带来不好的体验,本文将介绍如何在React单页面应用中捕获错误,以防止整个页面的崩溃,需要的朋友可以参考下2023-09-09
这篇文章主要为大家介绍了每天一个hooks学习之useUnmount，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪2023-05-05
React Native使用百度Echarts显示图表的示例代码
本篇文章主要介绍了React Native使用百度Echarts显示图表的示例代码，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2017-11-11
本文主要介绍了antd4里table滚动的实现，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2023-03-03
解决React hook 'useState' cannot be called in
这篇文章主要为大家介绍了React hook 'useState' cannot be called in a class component报错解决方法，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪2022-12-12
最新评论