Comment obtenir une évaluation cinq étoiles en réaction

Comment implémenter une évaluation cinq étoiles dans React : 1. Définissez cinq éléments et donnez des styles différents en fonction du score. Implémentez le code tel que "starNum :['star0','star0','star0','star0'. ,'star0']..."; 2. Définissez deux éléments et définissez la largeur de l'élément enfant en fonction du score pour bloquer l'image d'arrière-plan de l'élément parent. Le code d'implémentation est tel que "let num=(Math .round(this.props.star)/2).. "

L'environnement d'exploitation de ce tutoriel : système Windows 10, React version 18.0.0, ordinateur Dell G3.

Comment implémenter des avis cinq étoiles dans React ?

Encapsuler les composants de réaction : afficher les avis cinq étoiles

Deux façons simples d'afficher des avis cinq étoiles basés sur des notes telles que 3,7 et 7,8

Encapsuler dans React composants et les citer directement lors de leur utilisation. C'est tout

La première idée : définir cinq éléments et donner des styles différents en fonction des scores ; la deuxième idée : définir deux éléments, l'élément parent reçoit une étoile incolore à cinq branches, et le L'élément enfant reçoit une étoile colorée à cinq branches, selon La note définit la largeur de l'élément enfant pour couvrir l'image d'arrière-plan de l'élément parent

Méthode 1 : Définir différents styles CSS en fonction de différentes notes

Trois images d'arrière-plan : star0.png, star1.png, star2. png

1) code css : Le style peut être modifié selon vos propres besoins

.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) Code js du composant :

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) Appelez le composant Star dans d'autres composants et passez les paramètres :

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

<em id="__mceDel"><em id="__mceDel"><Star star={7.3} /></em></em> s'affiche comme  :

La page s'affiche comme : Cette méthode nécessite un petit calcul de montant.

Méthode 2 : utilisez la largeur de l'élément enfant pour bloquer l'élément parent

L'image d'arrière-plan de l'élément parent est une étoile incolore à cinq branches et l'image d'arrière-plan de l'élément enfant est une étoile colorée à cinq branches

Image de fond :

code css :

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

code js du composant :

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) Appeler et transmettre les paramètres s'affiche comme

 :

La page s'affiche comme :

🎜🎜Cette méthode nécessite que les images d'arrière-plan des éléments parent et enfant soient exactement les mêmes. même taille, et la largeur de l'élément enfant correspondant au nombre d'étoiles à cinq branches doit être calculée avec précision🎜🎜Étude recommandée : "🎜 tutoriel vidéo de réaction🎜》🎜

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!