Bagaimana untuk mencapai penilaian lima bintang dalam tindak balas

Cara melaksanakan penilaian lima bintang dalam React: 1. Tetapkan lima elemen dan berikan gaya berbeza mengikut skor Kod pelaksanaan adalah seperti "starNum:['star0','star0','star0 ','star0', 'star0']..."; 2. Tetapkan dua elemen, dan tetapkan lebar elemen anak mengikut skor untuk menyekat imej latar belakang elemen induk. Kod pelaksanaan adalah seperti " biarkan num=(Math.round(this.props.star)/ 2)...".

Persekitaran pengendalian tutorial ini: Sistem Windows 10, bertindak balas versi 18.0.0, komputer Dell G3.

Bagaimana untuk mencapai ulasan lima bintang dalam tindak balas?

Pengenkapsulan komponen tindak balas: paparkan ulasan lima bintang

Dua cara mudah berdasarkan Penilaian serupa 3.7 dan 7.8 menunjukkan ulasan lima bintang

Dikapsulkan ke dalam komponen tindak balas, yang boleh dirujuk terus apabila digunakan

Idea pertama: Tetapkan lima elemen dan berikan yang berbeza gaya mengikut penilaian; Dua idea: Tetapkan dua elemen, elemen induk ialah bintang berbucu lima yang tidak berwarna, dan elemen anak ialah bintang berbucu lima berwarna Tetapkan lebar elemen kanak-kanak mengikut skor untuk menyekat imej latar belakang elemen induk

Kaedah 1: Tetapkan gaya css berbeza mengikut penilaian berbeza

Tiga imej latar belakang: star0.png, star1.png, star2.png

1) kod css: Gaya boleh diubah suai mengikut keperluan anda sendiri

.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) Kod js komponen:

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) Panggil komponen Bintang dalam komponen lain dan lulus parameter:

<Star star={4} />  Halaman dipaparkan sebagai :

<em id="__mceDel"><em id="__mceDel"><Star star={7.3} /></em></em>

Halaman dipaparkan sebagai:

Kaedah ini memerlukan sedikit pengiraan.

Kaedah 2: Gunakan lebar elemen anak untuk menyekat elemen induk

Imej latar belakang elemen induk tidak berwarna Bintang berbucu lima, imej latar belakang sub-elemen ialah bintang berbucu lima berwarna

Imej latar belakang:

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

kod css :

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;

Kod js komponen:

3) Panggilan dan hantar parameter Halaman

dipaparkan Untuk

:

:

Kaedah ini memerlukan ibu bapa dan anak Imej latar belakang unsur-unsur adalah betul-betul saiz yang sama, dan lebar sub-elemen sepadan dengan bilangan bintang berbucu lima mesti dikira dengan tepat Pembelajaran yang disyorkan: "

tutorial video bertindak balas"

Atas ialah kandungan terperinci Bagaimana untuk mencapai penilaian lima bintang dalam tindak balas. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!