如何在5星上获得n星，在这里

Question

这是我得到星星的功能，用于评级。我需要5颗白色的星星，并在上面得到n颗金色的星星。

let n = []
for(var i = 0; i < product.avg_rating; i++) {
  n.push(<i class="fa fa-star" key={i}></i>)
}

我在这里调用这个变量

<div className="rating">
  {n}
</div>

Answer 1

创建一个 Rating 组件，它接收一个评级道具值并有条件地给星星着色。你可以一次完成。

import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
import { faStar } from "@fortawesome/free-solid-svg-icons";

// create [1,2,3,4,5] once
const starArray = [...Array(5).keys()].map(i => i + 1);

const Rating = ({ rating }) =>
  starArray.map(i => ( // use many times
    <FontAwesomeIcon
      key={i}
      icon={faStar}
      color={rating >= i ? "orange" : "lightgrey"}
    />
  ));

我使用了 react-fontawesome但逻辑概念上是一样的，只要换上你使用的任何图标就可以了。

Answer 2

根据我对你问题的理解你可以这样做。

let golden = [];
for(var i = 0; i < product.avg_rating; i++) {
  golden.push(<i class="fa fa-star" key={i}></i>)
}
let white = [];
for(var i = 0; i < (5-product.avg_rating); i++) {
  white.push(<i class="fa fa-star" key={i}></i>) // provide appropriate class for white stars
}

return(
<div className="rating">
{golden}
{white.map((i)=><span> {i} </span>)}
</div>
)