React星星评分组件的实现
短信预约 -IT技能 免费直播动态提醒
实现的需求为传入对商品的评分数据，页面显示对应的星星个数。
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星星评分内容请搜索编程网以前的文章或继续浏览下面的相关文章希望大家以后多多支持编程网！
免责声明：
① 本站未注明“稿件来源”的信息均来自网络整理。其文字、图片和音视频稿件的所属权归原作者所有。本站收集整理出于非商业性的教育和科研之目的，并不意味着本站赞同其观点或证实其内容的真实性。仅作为临时的测试数据，供内部测试之用。本站并未授权任何人以任何方式主动获取本站任何信息。
② 本站未注明“稿件来源”的临时测试数据将在测试完成后最终做删除处理。有问题或投稿请发送至: 邮箱/279061341@qq.com QQ/279061341
