Reactで5つ星評価を獲得する方法-フロントエンドQ&A-php.cn

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

藏色散人

リリース： 2023-01-04 16:43:40

オリジナル

2144 人が閲覧しました

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

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

このチュートリアルの動作環境: 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} />

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

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