Ⅰ- 壹 - 功能展示和使用需求

一需要安装styled-components

yarn add styled-components

二用到的图标

Ⅱ - 贰 - 封装代码

一创建文件Star.jsx

import React, { Component } from 'react'import styled from "styled-components";
import star0 from '@a/images/iconku/star0.png'
import star1 from '@a/images/iconku/star1.png'
import star2 from '@a/images/iconku/star2.png'const Boxs = styled.div`.star{display: inline-block;
}
.star>span{display: inline-block;width: .12rem;height:.12rem;background-size: .12rem .12rem;
}
.star0{background-image: url(${star0});
}
.star1{background-image: url(${star1});
}
.star2{background-image: url(${star2});
}
`
class Star extends Component{constructor(props){super(props);this.state={starNum:['star0','star0','star0','star0','star0'] //设置默认背景图}}onClickstrt = (index) => { return () => { this.props.onClickstar(index)}}componentWillReceiveProps(nextProps) {console.log(this.props.star,nextProps, "componentWillReceiveProps");this.getStar(Math.round(nextProps.star) / 2 + 1); //将传过来的类似7.3数字进行四舍五入再除2，得到的是类似2,3.5,6这种值}componentDidMount() {console.log(this.props.star,"componentDidMount");this.getStar(Math.round(this.props.star) / 2 + 1); //将传过来的类似7.3数字进行四舍五入再除2，得到的是类似2,3.5,6这种值}getStar(num){let newStar = this.state.starNum.map((item)=>{ //当num=3.5时遍历后newStar数组变成['star2','star2','star2','star1','star0','star0']--num;return num>=1?'star2':((num>0)?'star1':'star0'); //两次三目运算})this.setState({starNum:newStar  //设置state为遍历后的新数组})}render(){return (<Boxs><span className="star">{this.props.isStarClick? this.state.starNum.map((item, index)=>{return <span className={item} onClick={this.onClickstrt(index)} key={index+item}></span>}): this.state.starNum.map((item, index)=>{return <span className={item}  key={index+item}></span>})}{/* {this.state.starNum.map((item, index)=>{return <span className={item} onClick={this.onClickstrt(index)} onChange={this.onChanges} key={index+item}></span>})} */}</span></Boxs>)}
}
export default Star;

二使用

在使用的地方导入

import Star from "@c/star/Star";

实例组件

可点击

<Star isStarClick={true}  onClickstar={(index) => this.setState({stari:(index+1)*2})}  star={this.state.stari}></Star>

常规

 <Star isStarClick={false}   star={6}></Star>```javascript<div><Star star={2.5} /><Star star={2} /><Star star={4.5} /></div>

参数详解

参数	类型	详解
star	number	高亮星星数
isStarClick	bool 是否开启点击高亮	（默认否）
onClickstar	Callback	开启点亮之后的回调

React-封装星星评价（支持半星、点击）拿来即用相关推荐

微信小程序-星星评分组件（支持半星/自定义尺寸）
由于从网上直接copy的评分组件虽然能用,但是我找到的组件渲染做得稍差,于是准备自己改进一下. 先放一个效果图: 一.准备准备类似的四张图片,图片一定要根据像素点精准对半切开,否则在小程序中会出现重 ...
JQ实现星星评价（带半星）
JQ实现星星评价效果今天要写一个评价功能,然后想了一下,把代码记录下来吧需要用到的图片 css代码 ul {padding-left: 0;overflow: hidden; } ul li {f ...
微信小程序星星评分代码片段（含半星）
微信小程序星星评分代码片段(含半星) 代码思路完整代码代码片段图片资源写代码时需要一个点击星星评分的功能安卓直接用RatingBar非常轻松的解决了到了小程序,没有现成的封装方法可以用了, ...
vue2.0+stylus实现星级评定组件，computed计算属性实现全星半星，动态改变星级，多种星星规格
vue2.0+stylus实现星级评定组件,computed计算属性实现全星半星,多种星星规格使用方法如下:(size为星星的大小,score为评分,比如传4.5,则4.5颗星亮:传4.1则四颗星亮 ...
小程序实现星星评分(共10分),含有半星
完整代码地址:https://download.csdn.net/download/qq_40190624/11154051 效果图: 星星评分做为一个子组件,由父组件传入分值进行判断,具体显示几个灰 ...
微信小程序实现星星评价效果
这篇文章主要为大家详细介绍了微信小程序实现星星评价效果,支持多个条目评价,具有一定的参考价值,感兴趣的小伙伴们可以参考一下本文实例为大家分享了微信小程序实现星星评价效果的具体代码,供大家参考,具体内 ...
jQuery 小白都能秒懂的案例1：星星评价特效
讲 jQuery,用了个例子,星星评价.我 f4,真的是临时想到做这个的. 毕竟 jQuery 太熟悉了,从 1.2 开始用到现在的 3.x.而且这个案例也很简单,如图所示. 主要功能就是点击星星,获 ...
vue 实现的评分小星星组件，包括半星
github源码地址:https://github.com/13476075014/node-vue/blob/master/mynodeproject/13.sell/sell/src/compon ...
react封装函数_GitHub - daifee/react-component: 用 React 封装一套常用组件
Daifee-React-Component 用 React 封装一套常用组件所有组件都是 stateless 组件,但为方便,某些组件提供 API 调用方式的静态方法. [TOC] 使用前须知源 ...

React-封装星星评价（支持半星、点击）拿来即用

Ⅰ- 壹 - 功能展示和使用需求

一需要安装styled-components

二用到的图标

Ⅱ - 贰 - 封装代码

一创建文件Star.jsx

二使用

React-封装星星评价（支持半星、点击）拿来即用相关推荐

最新文章

热门文章

React-封装星星评价（支持半星、点击）拿来即用

Ⅰ- 壹 - 功能展示和使用需求

一 需要安装styled-components

二 用到的图标

Ⅱ - 贰 - 封装代码

一 创建文件Star.jsx

二 使用

React-封装星星评价（支持半星、点击）拿来即用相关推荐

最新文章

热门文章

一需要安装styled-components

二用到的图标

一创建文件Star.jsx

二使用