react前端通过接收到的数字显示五星评分

最新推荐文章于 2024-08-24 09:30:40 发布

iimmhy

最新推荐文章于 2024-08-24 09:30:40 发布

阅读量468

点赞数

分类专栏：我的React的学习记录文章标签： react.js

本文链接：https://blog.csdn.net/WliU_LI/article/details/120011903

版权

我的React的学习记录专栏收录该内容

14 篇文章 1 订阅

订阅专栏

该博客介绍了一个React组件，用于根据`recommend`值显示半星、整星或空心星的评分展示。组件接收一个`recommend`属性，如4或3.5，根据输入值动态渲染SVG图片来构成评分星级。示例展示了如何使用该组件创建4星和3.5星的评分效果。

摘要由CSDN通过智能技术生成

只需要传递recommend的值

0.5=》表示半星
1=》表示整星
0=》表示空心


import React, { useMemo } from "react";
import emptyStar from "./image/empty-star.svg";
import halfStar from "./image/half-star.svg";
import fullStar from "./image/full-star.svg";

interface Props {
  recommend: number;
}
export const Star: React.FC<Props> = ({ recommend }) => {
  const stars = useMemo(() => {
    let _stars: string[] = [];
    for (let i = 0; i < 5; i++) {
      _stars.push(
        i + 1 <= recommend
          ? `${fullStar}`
          : 0.5 + i <= recommend
          ? `${halfStar}`
          : `${emptyStar}`
      );
    }
    return _stars;
  }, [recommend]);

  return (
    <div className="w-full h-10 bg-white flex  justify-start items-center">
      {stars.map((star, index) => {
        return (
          <span key={index} className="inline-block">
            <img src={star} alt="" />
          </span>
        );
      })}
    </div>
  );
};