#javascript #reactjs #material-ui
#javascript #reactjs #материал-пользовательский интерфейс
Вопрос:
В моем проекте есть страница, на которой все расширяемые карточки представлены в виде списка. В настоящее время у меня есть код, который не масштабируется. У меня так много тегов карточки в этом коде. Что я хочу сделать, так это загрузить данные для каждого поля card из 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>
);
}
}
Комментарии:
1. здравствуйте! был ли мой ответ полезным для вас? пожалуйста, дайте мне знать, если вам нужна дополнительная помощь, или если ответ был полезным!
Ответ №1:
сделайте что-то подобное и перебирайте свои данные, создавая свои карты. Я, очевидно, делаю предположения о том, как будут структурированы ваши данные, но я надеюсь, что это проясняет суть
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>
);
}
}