我在我的项目中有一个页面，其中所有可扩展卡都像列表一样存在。目前我的代码不可扩展。我在这段代码中有很多卡片标签。我想要做的是从json加载卡的每个字段的数据，并且只有一个短循环，通过运行一个循环/映射类型的函数来显示所有卡。每次我想在列表中添加更多卡片时，我都无法继续添加卡片标签。我该怎么办？
export default class ExpandableCard extends Component {
render(){
return (
<MuiThemeProvider>
<div>
<div>
<Card>
<CardHeader
title="Game Of Thrones"
subtitle="S01 E02"
actAsExpander={true}
showExpandableButton={true}
/>
<CardText expandable={true}>
Friends is an American television sitcom, created by David Crane and Marta Kauffman,
which originally aired on NBC from September 22, 1994, to May 6, 2004, lasting ten
seasons. With an ensemble cast starring Jennifer Aniston, Courteney Cox, Lisa
Kudrow, Matt LeBlanc, Matthew Perry and David Schwimmer
</CardText>
</Card>
<Card>
<CardHeader
title="Game Of Thrones"
subtitle="S01 E02"
actAsExpander={true}
showExpandableButton={true}
/>
<CardText expandable={true}>
Friends is an American television sitcom, created by David Crane and Marta Kauffman,
which originally aired on NBC from September 22, 1994, to May 6, 2004, lasting ten
seasons. With an ensemble cast starring Jennifer Aniston, Courteney Cox, Lisa
Kudrow, Matt LeBlanc, Matthew Perry and David Schwimmer
</CardText>
</Card>
<Card>
<CardHeader
title="Game Of Thrones"
subtitle="S01 E02"
actAsExpander={true}
showExpandableButton={true}
/>
<CardText expandable={true}>
Friends is an American television sitcom, created by David Crane and Marta Kauffman,
which originally aired on NBC from September 22, 1994, to May 6, 2004, lasting ten
seasons. With an ensemble cast starring Jennifer Aniston, Courteney Cox, Lisa
Kudrow, Matt LeBlanc, Matthew Perry and David Schwimmer
</CardText>
</Card>
<Card>
<CardHeader
title="Game Of Thrones"
subtitle="S01 E02"
actAsExpander={true}
showExpandableButton={true}
/>
<CardText expandable={true}>
Friends is an American television sitcom, created by David Crane and Marta Kauffman,
which originally aired on NBC from September 22, 1994, to May 6, 2004, lasting ten
seasons. With an ensemble cast starring Jennifer Aniston, Courteney Cox, Lisa
Kudrow, Matt LeBlanc, Matthew Perry and David Schwimmer
</CardText>
</Card>
<Card>
<CardHeader
title="Game Of Thrones"
subtitle="S01 E02"
actAsExpander={true}
showExpandableButton={true}
/>
<CardText expandable={true}>
Friends is an American television sitcom, created by David Crane and Marta Kauffman,
which originally aired on NBC from September 22, 1994, to May 6, 2004, lasting ten
seasons. With an ensemble cast starring Jennifer Aniston, Courteney Cox, Lisa
Kudrow, Matt LeBlanc, Matthew Perry and David Schwimmer
</CardText>
</Card>
<Card>
<CardHeader
title="Game Of Thrones"
subtitle="S01 E02"
actAsExpander={true}
showExpandableButton={true}
/>
<CardText expandable={true}>
Friends is an American television sitcom, created by David Crane and Marta Kauffman,
which originally aired on NBC from September 22, 1994, to May 6, 2004, lasting ten
seasons. With an ensemble cast starring Jennifer Aniston, Courteney Cox, Lisa
Kudrow, Matt LeBlanc, Matthew Perry and David Schwimmer
</CardText>
</Card>
<Card>
<CardHeader
title="Game Of Thrones"
subtitle="S01 E02"
actAsExpander={true}
showExpandableButton={true}
/>
<CardText expandable={true}>
Friends is an American television sitcom, created by David Crane and Marta Kauffman,
which originally aired on NBC from September 22, 1994, to May 6, 2004, lasting ten
seasons. With an ensemble cast starring Jennifer Aniston, Courteney Cox, Lisa
Kudrow, Matt LeBlanc, Matthew Perry and David Schwimmer
</CardText>
</Card>
<Card>
<CardHeader
title="Game Of Thrones"
subtitle="S01 E02"
actAsExpander={true}
showExpandableButton={true}
/>
<CardText expandable={true}>
Friends is an American television sitcom, created by David Crane and Marta Kauffman,
which originally aired on NBC from September 22, 1994, to May 6, 2004, lasting ten
seasons. With an ensemble cast starring Jennifer Aniston, Courteney Cox, Lisa
Kudrow, Matt LeBlanc, Matthew Perry and David Schwimmer
</CardText>
</Card>
<Card>
<CardHeader
title="Game Of Thrones"
subtitle="S01 E02"
actAsExpander={true}
showExpandableButton={true}
/>
<CardText expandable={true}>
Friends is an American television sitcom, created by David Crane and Marta Kauffman,
which originally aired on NBC from September 22, 1994, to May 6, 2004, lasting ten
seasons. With an ensemble cast starring Jennifer Aniston, Courteney Cox, Lisa
Kudrow, Matt LeBlanc, Matthew Perry and David Schwimmer
</CardText>
</Card>
<Card>
<CardHeader
title="Game Of Thrones"
subtitle="S01 E02"
actAsExpander={true}
showExpandableButton={true}
/>
<CardText expandable={true}>
Friends is an American television sitcom, created by David Crane and Marta Kauffman,
which originally aired on NBC from September 22, 1994, to May 6, 2004, lasting ten
seasons. With an ensemble cast starring Jennifer Aniston, Courteney Cox, Lisa
Kudrow, Matt LeBlanc, Matthew Perry and David Schwimmer
</CardText>
</Card>
<Card>
<CardHeader
title="Game Of Thrones"
subtitle="S01 E02"
actAsExpander={true}
showExpandableButton={true}
/>
<CardText expandable={true}>
Friends is an American television sitcom, created by David Crane and Marta Kauffman,
which originally aired on NBC from September 22, 1994, to May 6, 2004, lasting ten
seasons. With an ensemble cast starring Jennifer Aniston, Courteney Cox, Lisa
Kudrow, Matt LeBlanc, Matthew Perry and David Schwimmer
</CardText>
</Card>
<Card>
<CardHeader
title="Game Of Thrones"
subtitle="S01 E02"
actAsExpander={true}
showExpandableButton={true}
/>
<CardText expandable={true}>
Friends is an American television sitcom, created by David Crane and Marta Kauffman,
which originally aired on NBC from September 22, 1994, to May 6, 2004, lasting ten
seasons. With an ensemble cast starring Jennifer Aniston, Courteney Cox, Lisa
Kudrow, Matt LeBlanc, Matthew Perry and David Schwimmer
</CardText>
</Card>
</div>
<FloatingActionButton className="floatingButton" backgroundColor='#293C8E'>
<ContentAdd />
</FloatingActionButton>
</div>
</MuiThemeProvider>
);
}
}
答案 0 :(得分：0)
执行类似的操作并循环显示构建卡片的数据。 我显然在假设你的数据是如何构建的，但我希望它能说清楚
export default class ExpandableCard extends Component {
render(){
// pass in your data through props
const { cardDataJSONObject } = this.props
// assuming you are getting your card data in a large json object
let cardList = []
Object.keys(cardDataJSONObject).forEach((cardIndex) => {
let card = cardDataJSONObject[cardIndex]
cardList.push (
<Card>
<CardHeader
title={card.title}
subtitle={card.subtitle}
actAsExpander={true}
showExpandableButton={true}
/>
<CardText expandable={true}>
{ card.text }
</CardText>
</Card>
)
})
return (
<MuiThemeProvider>
<div>
<div className='card-list'>
{/* here we are rendering the list of cards we build up above */}
{ cardList }
</div>
<FloatingActionButton className="floatingButton" backgroundColor='#293C8E'>
<ContentAdd />
</FloatingActionButton>
</div>
</MuiThemeProvider>
);
}
}