在 Javascript 中替换 return() 中的图标

问题描述

好的，我对来自网站 material-ui 的某些产品有 5 颗星 (<StarBorderIcon/>)。我想用实心星号 (<StarIcon/>) 替换它们，具体取决于在函数中插入的评分量。我尝试使用 replace() 但我看到它只需要字符串。有没有办法以简单的方式替换它们？我不能在 return 中使用 if 或 while 循环，所以我不知道该怎么做。

还有这些 (<StarIcon/>) 通常/通常被称为什么？我不确定该网站代码中的图标是否具有特定名称。

这是图标的来源代码。

import StarIcon from '@material-ui/icons/Star';
import StarBorderIcon from '@material-ui/icons/StarBorder';

解决方法

在 React 中，您始终会根据可用数据呈现组件的新副本。所以你不需要“替换”任何东西，你只是按照你想要的方式渲染它。

这意味着您可以执行以下操作：

function Stars({ rating }) {
  return <div className="stars">
    { rating >= 1 ? <StarIcon/> : <StarBorderIcon/> }
    { rating >= 2 ? <StarIcon/> : <StarBorderIcon/> }
    { rating >= 3 ? <StarIcon/> : <StarBorderIcon/> }
    { rating >= 4 ? <StarIcon/> : <StarBorderIcon/> }
    { rating >= 5 ? <StarIcon/> : <StarBorderIcon/> }
  </div>
}

这个 react 组件将渲染五颗星并检查每颗星是否有足够的 rating 来填充。填充每颗星需要越来越多的评分。

你会使用哪个：

<Stars rating={4} />

---

这些 (<StarIcon/>) 的一般/通常称为什么？

那是从 Material UI 导入的 react 组件。它可以像任何其他 react 组件一样进行处理和渲染。

---

Working example