实现的需求为传入对商品的评分数据，页面显示对应的星星个数。
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星星评分内容请搜索Devmax以前的文章或继续浏览下面的相关文章希望大家以后多多支持Devmax！