更改 MUI 评级中的星级数量答案

【问题标题】：Changing star amount in MUI Rating更改 MUI 评级中的星级数量
【发布时间】：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

【问题讨论】：

标签： reactjs material-ui icons jsx font-awesome

【解决方案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} />

【讨论】：