How to achieve five-star evaluation in react

React method to implement five-star evaluation: 1. Set five elements and give different styles according to the score. The implementation code is such as "starNum:['star0','star0','star0','star0', 'star0']..."; 2. Set two elements, and set the width of the child element according to the score to block the background image of the parent element. The implementation code is like "let num=(Math.round(this.props.star)/ 2)...".

The operating environment of this tutorial: Windows 10 system, react18.0.0 version, Dell G3 computer.

How to achieve five-star evaluation in react?

Encapsulate react components: display five-star evaluation

Two simple ways based on similar Ratings of 3.7 and 7.8 display five-star ratings

Encapsulated into react components, which can be directly referenced when used

The first idea: Set five elements and give different styles according to the rating; Two ideas: Set two elements, the parent element is a colorless five-pointed star, and the child element is a colored five-pointed star. Set the width of the child element according to the score to block the background image of the parent element

Method 1: Set different css styles according to different ratings

Three background images: star0.png, star1.png, star2.png

1) css code: The style can be modified according to your own needs

.star{
    display: inline-block;
}.star>span{
    display: inline-block;
    width: 10px;
    height: 10px;
    background-size: 10px 10px;
}.star0{
    background-image: url(img/star0.png);
}.star1{
    background-image: url(img/star1.png);
}.star2{
    background-image: url(img/star2.png);
}

2) Component js code:

import React,{Component} from 'react'class Star extends Component{
    constructor(props){
        super(props);        this.state={
            starNum:['star0','star0','star0','star0','star0'] //设置默认背景图        }
    }
    componentDidMount(){        this.getStar(Math.round(this.props.star)/2+1); //将传过来的类似7.3数字进行四舍五入再除2，得到的是类似2,3.5,6这种值    }
    getStar(num){
        let newStar = this.state.starNum.map((item)=>{ //当num=3.5时遍历后newStar数组变成['star2','star2','star2','star1','star0','star0']
            --num;            return num>=1?'star2':((num>0)?'star1':'star0'); //两次三目运算        })        this.setState({
            starNum:newStar  //设置state为遍历后的新数组        })
    }
    render(){        return (<span className="star">
            {                this.state.starNum.map((item, index)=>{                    return <span className={item} key={index}></span>                })
            }        </span>)    }
}
export default Star;

3) Call the Star component in other components and pass parameters:

<Star star={4} /> The page is displayed as ：

<em id="__mceDel">##<Star star={7.3} /><em id="__mceDel"></em></em> The page is displayed as: This method requires a small amount of calculations.

Method 2: Use the width of the child element to block the parent elementThe background image of the parent element is colorless Five-pointed star, the background image of the sub-element is a colored five-pointed star

Background image:

##css code:

.newstar ul{
    background-image: url(component/img/ico.png);
}.newstar ul li{
    height: 60px;
    background: url(component/img/ico.png) left -62px;
}

Component js code:

import React,{Component} from 'react'class Star extends Component{
    render(){
        let num=(Math.round(this.props.star)/2)*20+'%'; //根据评分计算子元素的宽度
        return (<div className="newstar">
            <ul>
                <li style={{width:num}}></li>
            </ul>
        </div>)    }
}
export default Star;

3) Call and pass parameters

<Star star={4} /> Page

is displayed as

：

## The page is displayed as:

This method requires the background image of the parent and child elements The sizes are exactly the same, and the width of the sub-element corresponding to the number of five-pointed stars must be accurately calculated Recommended learning: "

react video tutorial

"

The above is the detailed content of How to achieve five-star evaluation in react. For more information, please follow other related articles on the PHP Chinese website!