问题场景:
在使用Material UI v4开发页面的过程中,突然出现了下面的警告,看着很不舒服,尝试着去找到发出该警告的原因。
![](https://i-blog.csdnimg.cn/blog_migrate/fa9e3b2fe798d7d4dd94e21df84098b4.png)
相关代码:
<Card className={classes.card} raised elevation={6}>
{/* <ButtonBase className={classes.cardAction} onClick={openPost}> */}
<CardMedia className={classes.media} image={post.selectedFile || ''} title={post.title} onClick={openPost} style={{ cursor: 'pointer'}}/>
<div className={classes.overlay}>
<Typography variant='h6'>{post.name}</Typography>
<Typography variant='body2'>{moment(post.createdAt).fromNow()}</Typography>
</div>
{(user?.result?.sub === post?.creator || user?.result?._id === post?.creator) ? (
<div className={classes.overlay2}>
<Button style={{ color: 'white' }} size='small'
onClick={() => setCurrentId(post._id)}>
<MoreHoriz fontSize='medium' />
</Button>
</div>
) : null }
<div className={classes.details}>
<Typography variant='body2' color='textSecondary' gutterBottom>{post.tags.map(tag => `#${tag} `)}</Typography>
</div>
<Typography className={classes.title} variant='h5' gutterBottom>{post.title}</Typography>
<CardContent>
<Typography variant='body2' color='textSecondary' gutterBottom>{post.message}</Typography>
</CardContent>
{/* </ButtonBase> */}
<CardActions className={classes.cardActions}>
<Button size='small' color='primary'
disabled={!user?.result}
onClick={() => dispatch(likePost(post._id))}>
{/* <ThumbUpAlt fontSize='small'/>
喜欢
{post.likeCount} */}
<Likes />
</Button>
{(user?.result?.sub === post?.creator || user?.result?._id === post?.creator) ? (
<Button size='small' color='primary'
onClick={() => dispatch(deletePost(post._id))}>
<Delete fontSize='small' />
删除
</Button>
) : null }
</CardActions>
</Card>
问题出在第3行代码所在的CardMedia组件处,我也是第一次用MUI库,可能是不太熟练吧。
解决方法:
添加属性
component='div'
到CardMedia组件上,警告就消失了,控制台一干二净,看着就很舒服。
注意:
该解决方案因人而异,有可能你只是用CardMedia来展示图片,例如:
<CardMedia image={photo} id={post._id} className={classes.cardMedia}/>
此时如果报了同我上面一样的错误,那需要添加的属性可能为:
component='image'
再接再厉!