react 实现评分组件

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: ['不满意', '满意', '超满意']
  }
  /** 页面渲染前 */
  componentWillMount = () => {}
  /** 页面渲染后 */
  componentDidMount = () => {}
  /** 数据更新前 */
  componentWillUpdate = () => {
    this.showState()
  }
  showState() {
    let { count, num, enter, state } = this.state
    let f = Math.ceil(count / 2)
    if (num == 0 && enter == 0) {
      return ''
    } else if (num < f && enter < f) {
      return state[0]
    } else if (
      num == count ||
      enter == count
    ) {
      return state[2]
    } else {
      return state[1]
    }
  }
  /** 数据更新后 */
  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={() => {
                num = index + 1
                leave = num
                this.setState({ num, leave })
              }}
              onMouseEnter={() => {
                enter = index + 1
                num = 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>
    )
  }
}