Reactで5つ星評価を獲得する方法

5 つ星評価を実装する React メソッド: 1. 5 つの要素を設定し、スコアに応じて異なるスタイルを与えます。実装コードは次のようになります。「starNum:['star0','star0','star0'」 ,'star0', 'star0']..."; 2. 2つの要素を設定し、スコアに応じて子要素の幅を設定して、親要素の背景画像をブロックします。実装コードは「let num」のようなものです。 =(Math.round(this.props.star)/ 2)..."。

このチュートリアルの動作環境: Windows 10 システム、react18.0.0 バージョン、Dell G3 コンピューター。

react で 5 つ星の評価を達成するにはどうすればよいですか?

react コンポーネントをカプセル化する: 5 つ星の評価を表示する

2同様の評価に基づく簡単な方法 3.7 と 7.8 の評価で 5 つ星の評価が表示されます

#react コンポーネントにカプセル化され、使用時に直接参照できます

#最初のアイデア: 5 つの要素を設定し、異なるスタイルを与える評価に応じて; 2 つのアイデア: 2 つの要素を設定し、親要素は無色の五芒星、子要素は色付きの五芒星です スコアに応じて子要素の幅を設定し、背景をブロックします親要素の画像

方法 1: さまざまな評価に応じてさまざまな CSS スタイルを設定します3 つの背景画像: star0.png

、star1.png

、star2.png1) CSS コード: スタイルは必要に応じて変更できます

.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)コンポーネント js コード:

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) 他のコンポーネントで Star コンポーネントを呼び出し、パラメータを渡します:

ページ は :

### として表示されます<em id="__mceDel"><em id="__mceDel"></em></em>## ページは次のように表示されます: この方法では、少量の計算が必要です。

方法 2: 子要素の幅を使用して親要素をブロックします

親要素は無色の五芒星、子要素の背景画像は色付きの五芒星です 背景画像:

##css コード:

#

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

コンポーネント js コード:

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) パラメータを呼び出して渡す

ページ

は

：

##<スター star={7.3} />

ページは次のように表示されます:

この方法では、親要素と子要素の背景画像が必要です。サイズはまったく同じで、五芒星の数に対応するサブ要素の幅を正確に計算する必要があります。推奨される学習: 「

react ビデオ チュートリアル

」

以上がReactで5つ星評価を獲得する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。