Заполнить материал Компонент интерфейса пользовательского интерфейса в проекте React

Question

У меня есть страница в моем проекте, где все расширяемые карты есть, как список. В настоящее время у меня есть код, который не масштабируется. У меня так много карточных тегов в этом коде. Я хочу сделать это, чтобы загрузить данные для каждого поля карты из json и просто иметь короткий цикл, который показывает все карты, запуская только одну функцию типа loop/map. Я не могу постоянно добавлять теги для карт каждый раз, когда мне нужно добавить еще несколько карт в список. Как я должен это делать?

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> 
     ); 
    } 
} 

Answer 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> 
     ); 
    } 
}