react realization Score Components

I wrote a score components, the effect is as follows

Components Rate.js

import React, { Component } from 'react'
import './Rate.less'

export default class Rate extends Component {
  state = {
    count: this.props.number || 5,
    num: this.props.def || 0,
    enter: 0,
    leave: this.props.def || 0,
    state: [ 'not satisfied', 'satisfied', 'super-satisfied']
  }
  Before * / / ** page rendering
  componentWillMount = () => {}
  After / ** * page rendering /
  componentDidMount = () => {}
  Before * / / ** Data Update
  componentWillUpdate = () => {
    this.showState()
  }
  showState() {
    let f = Math.ceil(this.state.count / 2)
    if (this.state.num == 0 && this.state.enter == 0) {
      return ''
    } else if (this.state.num < f && this.state.enter < f) {
      return this.state.state[0]
    } else if (
      this.state.num == this.state.count ||
      this.state.enter == this.state.count
    ) {
      return this.state.state[2]
    } else {
      return this.state.state[1]
    }
  }
  After / ** * data update /
  componentDidUpdate = () => {}
  render() {
    let { count, num, enter, leave } = this.state
    return (
      <div className="rate">
        <p className="photo">
          {new Array(count).fill().map((item, index) => (
            <span
              key={index}
              onClick={() => {
                Surely = index + 1
                leave = num
                this.setState({ num, leave })
              }}
              onMouseEnter={() => {
                enter = index + 1
                a = 0
                this.setState({ enter, num })
              }}
              onMouseLeave={() => {
                enter = 0
                num = leave
                this.setState({ enter, num })
              }}
            >
              {enter > index ? (
                <i className="high" />
              ) : num > index ? (
                <i className="high" />
              ) : (
                <i className="nohigh" />
              )}
            </span>
          ))}
          {this.showState()}
        </p>
      </div>
    )
  }
}

Component style Rate.less

.rate .photo span {
  position: relative;
  display: inline-block;
  width: 0.4rem;
  height: 0.4rem;
  overflow: hidden;
  margin-right: 0.1rem;
  cursor: pointer;
}
.rate .photo span:last-child {
  margin-right: 0px;
}
.rate .photo span .nohigh {
  background-color: red;
  position: absolute;
  width: 0.4rem;
  height: 0.4rem;
  top: 0;
  left: 0;
  background: url('./star.png') no-repeat;
  background-size: 0.4rem 0.4rem;
}
.rate .photo span .high {
  background-color: purple;
  position: absolute;
  width: 0.4rem;
  height: 0.4rem;
  top: 0;
  left: 0;
  background: url('./star_active.png') no-repeat;
  background-size: 0.4rem 0.4rem;
}
.rate .starNum {
  font-size: 26px;
  color: #de4414;
  margin-top: 0.04rem;
  margin-bottom: 0.1rem;
}
.rate .bottoms {
  height: 54px;
  border-top: 1px solid #d8d8d8;
}
.rate .photo {
  margin-top: 30px;
}
.rate .bottoms a {
  margin-bottom: 0;
}
.rate .bottoms .garyBtn {
  margin-right: 57px !important;
}
.rate .bottoms a {
  width: 130px;
  height: 35px;
  line-height: 35px;
  border-radius: 3px;
  display: inline-block;
  font-size: 16px;
  transition: all 0.2s linear;
  margin: 16px 0 22px;
  text-align: center;
  cursor: pointer;
}
Kgryrbtn {
  margin-right: 60px !important;
  background-color: #e1e1e1;
  color: #999999;
}
.blueBtn {
  background-color: #1968b1;
  color: #fff;
}
.blueBtn:hover {
  background: #0e73d0;
}

　　

Background

transfer

<Rate number={10} def={5} />

number: for the total score, the default is 5

def: is the number of scores, the default is 0