更改 MUI 评级中的星级数量

Posted 2023-02-21

【中文标题】更改 MUI 评级中的星级数量

【英文标题】：Changing star amount in MUI Rating

【发布时间】：2021-12-16 09:51:54

【问题描述】：

所以我一直在搞乱 MUI 和 Font Awesome。使用 Font Awesome，它有一个非常简单的功能，允许使用三元运算符根据评分值更改星数。对于评级为 4.5 的对象，它将继续显示 4 星半。我一直在尝试多种方式（都是充满希望但显然是错误的方式），试图使用 MUI 图标代替 Font Awesome 图标，因为我认为它们在视觉上更具吸引力。与 Font Awesome 屏幕相比，这里屏幕上的唯一区别是我对 StarIcon 和其他人的使用将使用 Font Awesome 等效项进行重播。有人可以让我知道我到底做错了什么吗？

import React from 'react'
import StarIcon from '@mui/icons-material/Star';
import StarBorderIcon from '@mui/icons-material/StarBorder';
import StarHalfIcon from '@mui/icons-material/StarHalf';

const Rating = ( value, text, color ) => 
  return (
    <div className='rating'>
      <span>
        <i style=color
        className=
          value >= 1
          ? <StarIcon />
          : value >= 0.5
          ? <StarHalfIcon />
          : <StarBorderIcon />
          
        ></i>
      </span>
      <span>
        <i style=color
        className=
          value >= 2
          ? <StarIcon />
          : value >= 1.5
          ? <StarHalfIcon />
          : <StarBorderIcon />
          
        ></i>
      </span>
      <span>
        <i style=color
        className=
          value >= 3
          ? <StarIcon />
          : value >= 2.5
          ? <StarHalfIcon/>
          : <StarBorderIcon />
          
        ></i>
      </span>
      <span>
        <i style=color
        className=
          value >= 4
          ? <StarIcon />
          : value >= 3.5
          ? <StarHalfIcon />
          : <StarBorderIcon />
          
        ></i>
      </span>
      <span>
        <i style=color
        className=
          value >= 5
          ? <StarIcon />
          : value >= 4.5
          ? <StarHalfIcon />
          : <StarBorderIcon />
          
        ></i>
      </span>
          <span> text && text </span>
    </div>
  )


export default Rating

【参考方案1】：

您可以使用 MUI 提供的现成解决方案。或者，如果您愿意，可以使用以下代码：

import React from "react";
import StarIcon from "@mui/icons-material/Star";
import StarBorderIcon from "@mui/icons-material/StarBorder";
import StarHalfIcon from "@mui/icons-material/StarHalf";

const Rating = ( value, text, color ) => 
  return (
    <div className="rating">
      <span>
        [...Array(Math.floor(value))].map((key) => (
          <i key=key style= color  className=<StarIcon /> />
        ))
        value - Math.floor(value) && (
          <i style= color  className=<StarHalfIcon /> />
        )
        [...Array(5 - Math.ceil(value))].map((key) => (
          <i key=key style= color  className=<StarBorderIcon /> />
        ))
      </span>
      <span>text && text</span>
    </div>
  );
;

export default Rating;

【参考方案2】：

使用 MUI 中的Rating 组件怎么样？如果要显示半星，请将precision 属性更改为0.5

<Rating precision=0.5 defaultValue=0.5 />
<Rating precision=0.5 defaultValue=1 />
<Rating precision=0.5 defaultValue=1.5 />
<Rating precision=0.5 defaultValue=2 />
<Rating precision=0.5 defaultValue=2.5 />
<Rating precision=0.5 defaultValue=3 />
<Rating precision=0.5 defaultValue=4.5 />
<Rating precision=0.5 defaultValue=4 />
<Rating precision=0.5 defaultValue=4.5 />
<Rating precision=0.5 defaultValue=5 />