使用 React + Material UI Card Expander 扩展单个卡片

Question

我正在使用 React + Material UI 创建 3 张带有图像的可扩展卡片。一切正常，我可以渲染卡片并且它们（几乎）按照我想要的方式扩展。问题是：所有卡片都在同时展开，我希望只有一张卡片在用户点击时展开。

我知道我应该以某种方式使用状态来处理这个问题，但我不知道该怎么做。有什么见解吗？请随时分享代码或为我指明正确的方向。

CodeSandBox 以防万一有人想试一试（请在编码之前分叉！）： https://codesandbox.io/s/mutable-dust-lwljo

这是我的卡片组件：

/* eslint-disable linebreak-style */
/* eslint-disable react/prop-types */
/* eslint-disable semi */
/* eslint-disable linebreak-style */
import React from 'react'
import CardHeader from '@material-ui/core/CardHeader'
import CardContent from '@material-ui/core/CardContent'
import CardActions from '@material-ui/core/CardActions'
import Collapse from '@material-ui/core/Collapse'
import IconButton from '@material-ui/core/IconButton'
import Typography from '@material-ui/core/Typography'
import FavoriteIcon from '@material-ui/icons/Favorite'
import ExpandMoreIcon from '@material-ui/icons/ExpandMore'
import { CardLayout, CardImg } from './SiteCardStyled'


export class SiteCard extends React.Component {
    constructor(props) {
        super(props)
        this.state ={
            expanded: false,
        }
    }

    handleExpandClick = () => {
        this.setState({expanded: !this.state.expanded})
    };

    render() {

        let expanded = this.state.expanded

        return <CardLayout>
            <CardHeader
                title={this.props.cardtitle}
                subheader={this.props.cardsubheader}
            />
            <CardImg
                image={this.props.media}
                title={this.props.mediatitle}
            />
            <CardContent>
                <Typography variant="body2" color="textSecondary" component="p">
                    {this.props.carddescription}
                </Typography>
            </CardContent>
            <CardActions disableSpacing>
                <IconButton aria-label="add to favorites">
                    <FavoriteIcon />
                </IconButton>
                <IconButton
                    onClick={this.handleExpandClick}
                    //AQUI
                    aria-expanded={expanded}
                    aria-label="Ver mais"
                >
                    <ExpandMoreIcon />
                </IconButton>
            </CardActions>
            {/* aqui */}
            <Collapse in={expanded} timeout="auto" unmountOnExit>
                <CardContent>
                    <Typography paragraph>{this.props.cardexpandedtitle}</Typography>
                    <Typography paragraph>
                        {this.props.cardexpandedtext}
                    </Typography>
                </CardContent>
            </Collapse>
        </CardLayout>
    }
}

这里是我调用组件 + 道具的地方：

/* eslint-disable linebreak-style */
import React from 'react'
import { MainPage, MainPageWrapper, SiteCardArea } from './AppContainerStyled'
import { MenuTop } from './MenuTop/MenuTop'
import { MainText } from './MainText/MainText'
import { SiteCard } from './SiteCard/SiteCard'

export class AppContainer extends React.Component {
    constructor(props) {
        super(props)
    }


    render() {

        return <MainPage>

            <MainPageWrapper>

                <MenuTop></MenuTop>
                <MainText></MainText>
                <SiteCardArea>
                    <SiteCard
                        cardtitle={'title'}
                        cardsubheader={'subheader'}
                        mediatitle={'mediatitle'}
                        media={'https://i.picsum.photos/id/682/300/300.jpg'}
                        carddescription={'sitedescription'}
                        cardexpandedtitle={'cardexpandedtitle'}
                        cardexpandedtext={'cardexpandedtext'}
                    ></SiteCard>
                    <SiteCard
                        cardtitle={'title2'}
                        cardsubheader={'subheader2'}
                        mediatitle={'mediatitle2'}
                        media={'https://i.picsum.photos/id/680/300/300.jpg'}
                        carddescription={'sitedescription2'}
                        cardexpandedtitle={'cardexpandedtitle2'}
                        cardexpandedtext={'cardexpandedtext2'}
                    ></SiteCard>
                    <SiteCard
                        cardtitle={'title3'}
                        cardsubheader={'subheader3'}
                        mediatitle={'mediatitle3'}
                        media={'https://i.picsum.photos/id/672/300/300.jpg'}
                        carddescription={'sitedescription3'}
                        cardexpandedtitle={'cardexpandedtitle3'}
                        cardexpandedtext={'cardexpandedtext3'}
                    ></SiteCard>
                </SiteCardArea>

            </MainPageWrapper>

        </MainPage>

    }
}

也许每张卡片都应该有一个状态？但如果是这样的话，我应该创建一个不同的函数来处理每张卡吗？我知道我可能越来越接近答案，但我被困住了。任何人都可以帮忙吗？非常感谢！

Answer 1

将卡片的标题保存在状态中，因为它在您的情况下看起来是独一无二的，然后根据该标题打开特定的卡片。也许将其命名为activeTitle。