用 JavaScript 替换 return() 中的图标

Question

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

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

这是图标的来源代码。

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

Answer 1

在 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