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

, 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); }

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 ( { this.state.starNum.map((item, index)=>{ return  }) } ) } } export default Star;

3) Rufen Sie die Star-Komponente in anderen Komponenten auf und übergeben Sie Parameter:

:

页面显示为：

Die Seite wird wie folgt angezeigt:Diese Methode erfordert eine kleine Berechnung.

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

CSS-Code:

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

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