如何在带有material-ui的react spa中将评级整数显示为星星图标？

问题描述

我正在学习带有 Material-UI 的 React JS，并且正在创建一个示例 MERN 应用程序。我需要在前端将来自后端节点服务器的评级显示为星星（作为图标）。

示例：如果用户有 3 个评分，我需要同样显示 3 个星

我试过了：

<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
}

感谢所有帮助我解决问题的人