React 별 평가 구성 요소 의 실현
1.점 수 를 달리 하 는 별 그림 3 장 준비
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 에 들 어가 면 받 은 score Array 는['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 별 평가 내용 은 우리 의 이전 글 을 검색 하거나 아래 의 관련 글 을 계속 조회 하 시기 바 랍 니 다.앞으로 많은 응원 바 랍 니 다!
이 내용에 흥미가 있습니까?
현재 기사가 여러분의 문제를 해결하지 못하는 경우 AI 엔진은 머신러닝 분석(스마트 모델이 방금 만들어져 부정확한 경우가 있을 수 있음)을 통해 가장 유사한 기사를 추천합니다:
바삭바삭하고 간단한 결제 페이지 만들기먼저 Next.js에서 프로젝트를 만듭니다. Vercel & Next.js가 매우 편하기 때문에 최근에는이 구성을 사용하고 있습니다. 그런 다음 Tailwind CSS를 넣습니다. Tailwind CSS를 사용하면 ...
텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
CC BY-SA 2.5, CC BY-SA 3.0 및 CC BY-SA 4.0에 따라 라이센스가 부여됩니다.