Question

我正在研究React中的星级组件。我已经成功实施了满星和空星评级，但是我被困在显示半星。我想出了我尝试过多次的逻辑，但没有找到实现该逻辑的方法。目前，该组件仅显示星级，没有任何点击功能。

我要实现以下逻辑：

假设我们有 selectedStars为2.5 和 totalStars为5 ，并且我们要显示两个完整的星星和一个半颗星星，其余的显示空星星。我将selectedStars分为两部分，一个包含整数部分，另一个包含浮动部分。我已经使用

成功地将这两部分分离了

firstHalf = Math.floor（selectedStars），结果为2

secondHalf = selectedStars％1 ，它将得到0.5

我也已经使用[... Array（totalStars）]将totalStars转换成一个数组，以便表示总共五颗星。而且我正在索引上运行循环。

我想同时实现这两个部分，否则如下：

if（索引，然后使用真棒字体的“ fa fa-star” 图标

否则if（secondHalf ==== 0.5），然后使用 font-awesome“ fa fa-star-half-o” 图标并 increase secondHalf 我之所以这样做，是因为只有一个半星，下次当它检查secondHalf值时，条件变为假，它将移至下一条语句。

其他使用 font-awesome“ fa fa-star-o” 图标表示空星星。

我希望您了解我要在这里实施的内容。

Answer 1

这就是我在您提供的codesandbox中实现您的secondMethod的方式：

secondMethod = () => {
  // implement the code for full, empty and half stars here.
  const { selectedStars, totalStars } = this.state;
  return [...Array(totalStars)].map((el, i) =>
    // check if current star should be half
    i < selectedStars && i + 1 > selectedStars ?
      <i key={i} className="fa fa-star-half-o" />
    // not half, so check if current star should be full
    : i < selectedStars ? <i key={i} className="fa fa-star" />
    // else, current star should be empty
    : <i key={i} className="fa fa-star-o" />
  );
};

在React中对星级组件逻辑实施

1 个答案: