1. RuiRate 评分需求分析
- 能够动态录入分数的大小;
- 点击可以改变评分的值;
- 输入的分数值不完全是整数;
- 改变评分星星的大小和距离;
- 可以使用图片替换默认评分星星的样式。
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>