So erreichen Sie eine Fünf-Sterne-Bewertung in React

So implementieren Sie eine Fünf-Sterne-Bewertung in React: 1. Legen Sie fünf Elemente fest und geben Sie je nach Bewertung unterschiedliche Stile an. Implementieren Sie den Code wie „starNum:['star0','star0','star0','star0'. ,'star0'] ..."; 2. Legen Sie zwei Elemente fest und legen Sie die Breite des untergeordneten Elements entsprechend der Punktzahl fest, um das Hintergrundbild des übergeordneten Elements zu blockieren. Der Implementierungscode lautet wie folgt: "let num=(Math .round(this.props.star)/2).. ."

Die Betriebsumgebung dieses Tutorials: Windows 10-System, Reaktionsversion 18.0.0, Dell G3-Computer.

Wie implementiert man Fünf-Sterne-Bewertungen in React?

React-Komponenten einkapseln: Fünf-Sterne-Bewertungen anzeigen

Zwei einfache Möglichkeiten, Fünf-Sterne-Bewertungen basierend auf Bewertungen wie 3,7 und 7,8 anzuzeigen

Einkapseln in React Komponenten und zitieren Sie sie direkt, wenn Sie sie verwenden. Das ist es. Die erste Idee: Legen Sie fünf Elemente fest und geben Sie je nach Bewertung unterschiedliche Stile an. Die zweite Idee: Legen Sie zwei Elemente fest, das übergeordnete Element erhält einen farblosen fünfzackigen Stern und das Das untergeordnete Element erhält entsprechend einen farbigen fünfzackigen Stern. Die Bewertung legt die Breite des untergeordneten Elements fest, um das Hintergrundbild des übergeordneten Elements abzudecken. Methode 1: Legen Sie verschiedene CSS-Stile entsprechend unterschiedlichen Bewertungen fest Drei Hintergrundbilder: star0.png

, star1.png

, star2 png

1) CSS-Code: Der Stil kann nach Ihren eigenen Bedürfnissen geändert werden

.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) Komponenten-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) Rufen Sie die Star-Komponente in anderen Komponenten auf und übergeben Sie Parameter:

Die Seite

wird angezeigt als

:

<Star star={4} />     页面显示为：

<em id="__mceDel"><em id="__mceDel"><Star star={7.3} /></em></em> Die Seite wird wie folgt angezeigt: Diese Methode erfordert eine kleine Berechnung.

Methode 2: Verwenden Sie die Breite des untergeordneten Elements, um das übergeordnete Element zu blockieren

Das Hintergrundbild des übergeordneten Elements ist ein farbloser fünfzackiger Stern und das Hintergrundbild des untergeordneten Elements ist ein farbiger fünfzackiger Stern

Hintergrundbild:

CSS-Code:

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

Komponenten-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) Parameter aufrufen und übergeben

wird wie folgt angezeigt:

Die Seite wird wie folgt angezeigt:

Diese Methode erfordert, dass die Hintergrundbilder der übergeordneten und untergeordneten Elemente genau übereinstimmen gleiche Größe und die Breite des untergeordneten Elements, die der Anzahl der fünfzackigen Sterne entspricht, müssen genau berechnet werdenEmpfohlene Studie: „

Reagieren Sie mit dem Video-Tutorial

》

Das obige ist der detaillierte Inhalt vonSo erreichen Sie eine Fünf-Sterne-Bewertung in React. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!