一: 含半星的评分渲染

在DOM中  调用setStar方法进行渲染

 <div>
                      {List_src.score?
                        this.setStar(List_src.score) : ''  //这里List_src.score 为后台传过来的评分数
                      }
 </div>

在setStar函数中书写逻辑

 setStar(v){
    let num = Math.floor(v*2)/2; //把后台传过来的分数向下取值 获得整数,以防出错
    let array=[] ; //通过array数组中的[0,1,2] 来条件渲染星星组件
    for(let i=0; i<Math.floor(num);i++){  // 后台传几分,这里就渲染几个亮星
      array.push(1) //亮星用数字 1 表示
    }
    if(num%1!==0){
      array.push(2) //半星用数字 2 表示
    }
    if(array.length<5){ //如果数组长度小于5 那么就多渲染多少个
      for(let i=0;i<(5-array.length);i++){
        array.push(0) // 灰星用 3 表示
      }
    }
    return(
      <div>
        {
          array.map((item,index)=>{  //条件渲染  star 1 : 亮星   star2:半星 star1 : 灰星
            return (
              <img key={index} src={item=='1'? star : item=='2' ? star2 : item=='0'? star1 : ''} alt=""/>
            )
          })
        }
      </div>
    )
  }

二:不含半星的评分渲染

这个功能就简单许多 与上面半星渲染逻辑差不多

 setStar(v){
    let num = v.toString().substring(0, 1); // 3
    let array=[ ] ; //通过array数组中的[0,1,2] 来条件渲染星星组件
    for (let i =1 ; i<5 ; i++){
      if(i<num){
      array.push(1)
      }else{
        array.push(0)
      }
}
    return(
      <div>
        {
          array.map((item,index)=>{  //条件渲染  star 1 : 亮星  star:灰星
            return (
              <img key={index} src={item=='1'? star1 : star} alt=""/>
            )
          })
        }
      </div>
    )
  }

三:具有评价功能的星星组件

效果如图:

评价.gif

用的方式比较古老死板,但是这个页面一般不会去做大的修改,因此没必要大费周章,也是因为技术有限
现在state属性里定义需要的属性

 constructor(props){
    super(props);
this.state={
  text:'请评价',  //点击后显示的文本内容 : 0个星=>'请评价'  1-3个星:'不满意' 4个星:'满意 '  5个星 : '超满意'
 sorce:'',//评分  需要给后台传的分数
arr:[0,0,0,0,0] //默认0 为灰色星星
}

接下来就是逻辑

<div>
            {
              arr.map((item,index)=>{
                return (
                  <div key={index} onClick={()=>{
                    index ==0 ? this.setState({text:'不满意',arr:[1,0,0,0,0],sorce:1}) : ''
                    index ==1 ? this.setState({text:'不满意',arr:[1,1,0,0,0],sorce:2}) : ''
                    index ==2 ? this.setState({text:'不满意',arr:[1,1,1,0,0],sorce:3}) : ''
                    index ==3 ? this.setState({text:'满意'  ,arr:[1,1,1,1,0],sorce:4}) : ''
                    index ==4 ? this.setState({text:'超满意',arr:[1,1,1,1,1],sorce:5}) : ''
                  }}>
                    <img style={{width:'.61rem',height:".59rem",marginRight:'.1rem'}} src={item==1? star2 : star1} alt=""/>
                  </div>
                )
              })
            }

          </div>
        <p className={style.status}>
          {this.state.text}
        </p>

本文完 欢迎大佬指导.