Javascript reactjs中的自定义半星评级

在描述我的问题之前，我想宣布我所做的星级评定只是为了学习和娱乐，所以我不使用外部图书馆。我也不是在重新发明一个新轮子

我想通过制定一个半星级评分来练习reactjs，这将给学习带来很多乐趣。这仍然很有趣，但我在发展半明星评级方面遇到了麻烦。我只能给非小数部分打分，比如1到5，但我也想要半个部分。在悬停时，如何确定鼠标指针是否在星号的一半，或者在单击时如何确定鼠标指针是否在星号的一半

有谁能帮我介绍一下如何进行半星级评定吗？我正在使用ionicons作为星星。这是我的密码

class Rating extends React.PureComponent {
  constructor(props) {
    super(props);
    this.state = {
      rating: this.props.rating || null,
      temp_rating: null
    };
  }

  handleMouseover(rating) {
    this.setState(prev => ({
      rating,
      temp_rating: prev.rating
    }));
  }

  handleMouseout() {

    this.setState(prev => ({
      rating: prev.temp_rating
    }));
  }

  rate(rating) {
    this.setState({
      rating,
      temp_rating: rating
    });
  }

  render() {
    const { rating } = this.state;
    let stars = [];
    for (let i = 0; i < 5; i++) {
      console.log('i', i);
      let klass = "ion-ios-star-outline";
      if (this.state.rating >= i && this.state.rating !== null) {
        klass = "ion-ios-star";
      }
      stars.push(
        <i
          className={klass}
          onMouseOver={() => this.handleMouseover(i)}
          onClick={() => this.rate(i)}
          onMouseOut={() => this.handleMouseout()}
        />
      );
    }
    return (
      <div className="rating">
        {stars}
      </div>
    );
  }
}

export default Rating;

等级扩展了React.PureComponent{
建造师（道具）{
超级（道具）；
此.state={
评级：this.props.rating | | null，
温度等级：空
};
}
搬运室（额定值）{
this.setState（prev=>({
评级
温度等级：上一等级
}));
}
handleMouseout（）{
this.setState（prev=>({
额定值：上一个温度额定值
}));
}
比率（评级）{
这是我的国家({
评级
温度额定值：额定值
});
}
render（）{
const{rating}=this.state；
让星星=[]；
for（设i=0；i<5；i++）{
console.log（'i'，i）；
让klass=“ion ios星星轮廓”；
if（this.state.rating>=i&&this.state.rating！==null）{
klass=“ion ios之星”；
}
推(
这是我的手推车（i）}
onClick={（）=>this.rate（i）}
onMouseOut={（）=>this.handleMouseout（）}
/>
);
}
返回(
{星星}
);
}
}
出口违约评级；

---

对于演示，您可以看到。

编辑：不要使用5个div，每个div都有一个完整的星形，而是使用10个div，每个div都有半个星形。每个div都太窄，无法容纳一个完整的星形，您可以使用

overflow:hidden

隐藏另一半

例如：

我将样式放在组件中，因为我找不到CSS表，但您应该将其包含在CSS中

相关代码：

for (let i = 0; i < 10; i++) {
  let klass = "ion-ios-star-outline";
  if (this.state.rating >= i && this.state.rating !== null) {
    klass = "ion-ios-star";
  }
  stars.push(
    <i
      style={{ 
          display: "inline-block", 
          width: "7px", 
          overflow: "hidden", 
          direction: (i%2===0) ? "ltr" : "rtl"
      }}
      className={klass}
      onMouseOver={() => this.handleMouseover(i)}
      onClick={() => this.rate(i)}
      onMouseOut={() => this.handleMouseout()}
    />
  );
}

for（设i=0；i<10；i++）{
让klass=“ion ios星星轮廓”；
if（this.state.rating>=i&&this.state.rating！==null）{
klass=“ion ios之星”；
}
推(
这是我的手推车（i）}
onClick={（）=>this.rate（i）}
onMouseOut={（）=>this.handleMouseout（）}
/>
);
}

对不起，我没听懂。请你解释一下好吗？对不起，我的知识不够，但我正在使用（i=0；ii如果你不介意的话，你能告诉我在中显示半星和全星的方法吗？只要伪代码就行了。为了解释，一个星需要14px，你把它放在一个7px的容器中。所以它溢出，你用溢出隐藏半星：隐藏。每秒钟溢出一个星（以便它显示另一面），我将文本方向改为从右向左（“rtl”）。哦，那么方向和溢出是隐藏非整数星号的主要逻辑吗？