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

最新推荐文章于 2024-08-16 17:55:57 发布

Rattenking

最新推荐文章于 2024-08-16 17:55:57 发布

阅读量732

点赞数

分类专栏： Taro React 入门到实战系列 React 文章标签： react.js taro javascript

本文链接：https://blog.csdn.net/m0_38082783/article/details/128936808

版权

Taro React 入门到实战系列同时被 2 个专栏收录

50 篇文章 25 订阅 ¥9.90 ¥99.00

订阅专栏

超级会员免费看

React

16 篇文章 0 订阅

订阅专栏

本文详细介绍了如何使用Taro开发React组件RuiRate，涵盖了评分需求分析、组件实现的结构、样式和逻辑，以及完整代码展示。组件支持动态录入分数、自定义星星样式，并提供了详细的参数说明和事件处理。

摘要由CSDN通过智能技术生成

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>

2.2 样式实现

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