Карта через массив в React

Question

Я постараюсь объяснить это как можно лучше, терпите меня, пожалуйста, извините. У меня есть массив с именем works, который содержит несколько объектов из портфолио. Я импортировал массив в свой файл компонента, и я могу просто переписывать его снова и снова, но у меня есть несколько элементов для каждого значения, и мой код будет очень длинным. Я чувствую, что это не очень сухо. Как я могу просто поместить информацию в свой компонент один раз и сделать так, чтобы она перебирала все в массиве.

Вот прототип того, как я сейчас это делаю.

class PortfolioCard extends React.Component {

 render() {
   return (
  <Card className>
    <CardHeader
      avatar={<Avatar aria-label="Recipe">R</Avatar>}
      title={works[0].title}
      subheader={works[0].name}
    />
    <CardMedia className image={works[0].pic} />

    <CardContent>
      <Typography component="p">
        {works[0].desciption}
      </Typography>
    </CardContent>
    <CardActions className disableActionSpacing>
      <IconButton aria-label="Live Site">
        <FavoriteIcon> {works[0].link}
        </FavoriteIcon>
      </IconButton>
      <IconButton aria-label="Github">
        <ShareIcon> {works[0].github}
        </ShareIcon>
      </IconButton>
    </CardActions>
  </Card>
);
}
}

Answer 1

Вы можете использовать array#map для визуализации массива со всей информацией.

class PortfolioCard extends React.Component {
 render() {
   return (
  <Card className>
  {works.map(({title, name, desciption, pic, link, github}) => ({
    <React.Fragment>
      <CardHeader
        avatar={<Avatar aria-label="Recipe">R</Avatar>}
        title={title}
        subheader={name}
      />
      <CardMedia className image={pic} />
      <CardContent>
        <Typography component="p">
          {desciption}
        </Typography>
      </CardContent>
      <CardActions className disableActionSpacing>
        <IconButton aria-label="Live Site">
          <FavoriteIcon> {link}
          </FavoriteIcon>
        </IconButton>
        <IconButton aria-label="Github">
          <ShareIcon> {github}
          </ShareIcon>
        </IconButton>
      </CardActions>
    <React.Fragment>
    }))}
  </Card>
  );
  } 
}

Answer 2

Вы можете использовать .map для рендеринга списка карт, как показано ниже при рендеринге. Также, когда вы отображаете массив элементов jsx, не забудьте установить уникальный ключ для верхнего элемента jsx, в вашем случае это Card

 return (
    {works.map((work, index) => (<Card key={"Key-"+index} className>
      <CardHeader
  avatar={<Avatar aria-label="Recipe">R</Avatar>}
  title={work.title}
  subheader={works.name}
/>
<CardMedia className image={work.pic} />

<CardContent>
  <Typography component="p">
    {work.desciption}
  </Typography>
</CardContent>
<CardActions className disableActionSpacing>
  <IconButton aria-label="Live Site">
    <FavoriteIcon> {work.link}
    </FavoriteIcon>
  </IconButton>
  <IconButton aria-label="Github">
    <ShareIcon> {work.github}
    </ShareIcon>
  </IconButton>
</CardActions>
 </Card>))}
 );

Answer 3

Помогает ли этот пример?

import React, { Component } from 'react';

class App extends Component {
  state = {
    works: [
      { name: 'First Work' },
      { name: 'Second Work' },
      { name: 'Third Work' },
    ],
  };
  render() {
    return (
      <div>
        {this.state.works.map((work, i) => {
          return <div key={i}>{work.name}</div>;
        })}
      </div>
    );
  }
}

export default App;