reactjs - React 中的星级组件逻辑实现

Question

我正在 React 中开发一个星级组件。我已经成功实现了满星和空星评级，但我陷入了显示半星的困境。我想出了一个我尝试了很多次的逻辑，但没有找到实现该逻辑的方法。目前该组件仅显示星级，没有任何点击功能。

我想实现这个逻辑:

假设我们selectedStars 为 2.5，totalStars 为 5，并且我们想要显示两颗全星和一颗半星，其余为空星。我将 selectedStars 分成两部分，一部分包含整数部分，另一部分包含 float 部分。我已经使用

成功分离了两部分

firstHalf = Math.floor(selectedStars) 它将给出结果 2

secondHalf = selectedStars % 1 它将给出结果 0.5

我还使用 [...Array(totalStars)] 将totalStars 转换为数组，以表示总共五颗星。我正在索引上运行循环。

对于这两个部分，我想实现这个 if else 梯子，如下所示:

if(index 然后使用 字体很棒的“fa fa-star”图标

else if(secondHalf === 0.5) 然后使用font-awesome“fa fa-star-half-o”图标并增加 secondaryHalf em> 我这样做是因为只有一个半星，下次当它检查 secondaryHalf 值时，条件结果为 false，它将移至下一条语句。

else使用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" />
  );
};