从一组卡片中只展开一张卡片

大佬教程收集整理的这篇文章主要介绍了从一组卡片中只展开一张卡片，大佬教程大佬觉得挺不错的，现在分享给大家，也给大家做个参考。

如何解决从一组卡片中只展开一张卡片？

开发过程中遇到从一组卡片中只展开一张卡片的问题如何解决？下面主要结合日常开发的经验，给出你关于从一组卡片中只展开一张卡片的解决方法建议，希望对你解决从一组卡片中只展开一张卡片有所启发或帮助；

我正在使用material ui Card来显示一组卡片，这是我的状态：

state = {
    items: [],anchortEl: null,expand: false
}

“expand”是在我点击展开卡片时进行标记。 这是必须显示卡片的地方：

render() {
    return (
        <div classname="outerdiv-favorites" >
            {
                this.state.items.length !== 0 ?
                    this.state.items.map((item,i) => (
                        <GrID>
                            <Card classname="root" key={i}>
                                <CardMedia classname='media' key="media">
                                    <img style={{ wIDth: "100%",height: "150px" }}
                                        alt="serviCE"
                                    />
                                </CardMedia>

                                <div
                                    classname="card-header"
                                    key={item.namE}
                                >{item.namE}</div>

                                <CardActions key="action"
                                    style={{ padding: '0' }}
                                    classname="card-actions"
                                >
                                    <Iconbutton aria-label="add to favorites">
                                        <FavoriteIcon />
                                    </Iconbutton>
                                    <Iconbutton
                                        onClick={() => {
                                            this.setState({
                                                ...this.state,expand: !this.state.expand
                                            })
                                        }}>
                                        <ExpandMoreIcon />
                                    </Iconbutton>
                                </CardActions>

                                <Collapse in={this.state.expanD} timeout="auto"
                                    unmountOnExit key="collapse">
                                    <CardContent key="content">
                                        <div>{item.description}</div>
                                    </CardContent>
                                </Collapse>
                            </Card>
                        </GrID>
                    ))
                    :
                    <div classname="no-approval-data"><p>WAITinG!</p></div>
            }
        </div>
    )
}

这是一张图片：

问题是当我点击展开一张卡片时，全部都展开了！ 如何仅展开我点击的卡片？

解决方法

@H_675_32@

您只有 1 个扩展状态，所有卡片都使用它。这意味着如果用户打开 1 张卡片，状态将发生变化，所有其他卡片也会同时展开。

为了解决这个问题，每张卡片都需要有自己独特的展开状态，例如：

state = {
    items: [
      {name: 'Foo',description: 'Foo is foo',expand: falsE},{name: 'Bar',description: 'Bar is bar',expand: truE},{name: 'Tree',description: 'Tree is tree',],anchortEl: null,}

,

将卡片的高度设置为 min-content。如果一张卡片的高度增加，则网格行高增加，默认样式，卡片调整为行高。因此，将其设置为 min-content 将确保它不会' t 调整到 grid-row-height。