如何解决在 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 组件一样进行处理和渲染。
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。