如何在这里获得 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

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

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>
)

Answer 2

创建一个 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，但逻辑在概念上是相同的，只需换用您正在使用的任何图标即可。

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

How to get n stars on 5 stars here

rating

reactjs