如何解决如何在带有material-ui的react spa中将评级整数显示为星星图标?
我正在学习带有 Material-UI 的 React JS,并且正在创建一个示例 MERN 应用程序。我需要在前端将来自后端节点服务器的评级显示为星星(作为图标)。
我试过了:
<Grid container>
<Grid item sm={3}>
<img src={user.image} />
</Grid>
<Grid item sm={5}>
<Typography variant="h5" color="primary">{user.userName}</Typography>
</Grid>
<Grid item sm={1}>
<STaroutlinedIcon />
</Grid>
</Grid>
但我只得到一颗星作为输出。我不知道如何实现这一目标。我提到了 How do I display a star for every 1 that is in the rating?react,但我无法理解,我提到了 Rendering react in a conditional for loop - 这几乎解决了,但我不清楚,因为它有点过时或我无法正确理解。提前致谢。
解决方法
我终于明白了,
{
user.rating ? <> {
[...Array(user.rating)].map(stars=>{
return <StarOutlinedIcon />
})
} </> : null
}
感谢所有帮助我解决问题的人
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。