在React中通过数组映射

Question

我将尽力解释这一点，请多多包涵。 我有一个名为work的数组，其中包含来自投资组合的多个对象。 我将数组导入到我的组件文件中，我可以一遍又一遍地重写它，但是每个值都有多个元素，并且我的代码很长。 我觉得那不是很干。 我如何只将信息放入组件一次并遍历数组中的所有内容。

这是我目前的做法的原型。

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

这个例子有帮助吗？

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;

Answer 2

您可以使用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 3

您可以使用.map渲染卡列表，如下所示。 另外，当您渲染jsx元素数组时，请不要忘记为案例中的顶部jsx元素设置唯一键。

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