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

Question

这是我获得评分的功能。我需要 5 颗白色星星并在上面涂上金色。

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>

标签： reactjsrating

Answer 1

创建一个Rating组件，该组件采用 rating prop 值并有条件地为星星着色。您可以一次性完成此操作。

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了 ，但逻辑在概念上是相同的，只需交换您正在使用的任何图像。