react实现星级评分组件代码

react电影星级评分组件封装

import React, {Component} from 'react';


export class Star extends Component {
    constructor(props) {
        super(props)
        console.log(this.props.name)
        this.state={
             //接到页面传过来的值    
            //因为当前页面显示五颗星，而分数是十分所以要去平均值，
            num:this.props.name/2,
            //根据页面当中的星星的数量来设置默认值
            arr:[1,2,3,4,5]
        }
    }
    render(){
        return(

            <span>
                {
                    this.state.arr.map((ele,index)=>{
                        return(
                            <span key={index}>
                                {ele>=this.state.num?<span style={{color:"#FFAC2D",fontSize:"20px"}}>☆</span>:<span style={{color:"#FFAC2D",fontSize:"20px"}}>★</span>}
                            </span>
                        )
                    })
                }
            </span>
    )
    }
}