Taro React组件开发（3） —— RuiRate 评论评分

1. RuiRate 评分需求分析

1. 能够动态录入分数的大小；
2. 点击可以改变评分的值；
3. 输入的分数值不完全是整数；
4. 改变评分星星的大小和距离；
5. 可以使用图片替换默认评分星星的样式。

2. 组件实现

2.1 页面结构实现

return <View className={`rui-rate-com-content rui-flex-ac rui-fa ${ className }`}
    style={customStyle}>
    {classNameArr.map((cls, i) => (
      <View
        className={`rui-pr ${cls.className}`}
        key={`rui-rate-star-${i}`}
        style={
  
   
   { ...starIconStyle , ...iconStyle }}
        onClick={handleClick.bind(this, i + 1)}
      > 
        {cls.html}
      </View>
    ))}
  </View>

2.2 样式实现

.rui-rate-com-content{
  %default_w_and_h{
    width: 30px;
    height: 30px;
  }
  %default_p_top{
    @extend %default_w_and_h;
    position: absolute;