如何在Reactjs中创建基于平均（十进制）的星级？

我已经创建了星级功能，它可以很好地处理整数。但我想修改它并实现平均星级功能。基于小数点的功能。在下面的代码中，“选定”道具值为2.5，但如何根据十进制值显示选定的一半星星（如2.5、3.4、2.3..等）

代码如下：

从“React”导入React；
从“react dom”导入react dom；
从“道具类型”导入道具类型；
导入“./style.scss”
常数星=（{selected=false，onClick=f=>f}）=>{
console.log（“selected:”，selected）；
返回(
);
};
Star.propTypes={
已选择：PropTypes.bool，
onClick:PropTypes.func
};
类StarRating扩展了React.Component{
建造师（道具）{
超级（道具）；
this.state={starsSelected:this.props.Selected}；
this.change=this.change.bind（this）；
}
更改（已选择开始）{
this.setState（{starsSelected:starsSelected}）；
}
render（）{
const{totalStars}=this.props；
const{starsSelected}=this.state；
返回(
{[…数组（totalStars）].map（（n，i）=>(
此.change（i+1）}
/>
))}

{stars selected}个{totalStars}星中的{stars}

);
}
}
StarRating.propTypes={
totalStars:PropTypes.number
};
StarRating.defaultProps={
全天星：5
};
const rootElement=document.getElementById（“根”）；
render（，rootElement）；

解决方案1 有一个很棒的软件包名为，它完全符合您的需求，基于令人敬畏的图标

解决方案2 假设你可以，你可以设计你的星星右边的0.1到0.9个部分，然后用灰色显示在你已经显示的全星星上。它可能看起来有点像这样（带心脏）：

解决方案1 有一个很棒的软件包名为，它完全符合您的需求，基于令人敬畏的图标

解决方案2 假设你可以，你可以设计你的星星右边的0.1到0.9个部分，然后用灰色显示在你已经显示的全星星上。它可能看起来有点像这样（带心脏）：

---

这取决于星形组件是否允许您绘制半颗星。这取决于星形组件是否允许您绘制半颗星。