在React中通过数组映射

时间:2018-11-12 02:56:06

标签: javascript arrays reactjs function object

我将尽力解释这一点,请多多包涵。我有一个名为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>
);
}
}

3 个答案:

答案 0 :(得分:0)

此示例有帮助吗?

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;

答案 1 :(得分:0)

您可以使用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>
  );
  } 
}

答案 2 :(得分:0)

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

 store i32 119, i32* %3, align 4
  store i32 20, i32* %1, align 4
  br label %7

; <label>:7:                                      ; preds = %19, %0
  %8 = load i32, i32* %1, align 4
  %9 = icmp slt i32 %8, 200
  br i1 %9, label %10, label %22

; <label>:10:                                     ; preds = %7
  store i32 13, i32* %2, align 4
  br label %11

; <label>:11:                                     ; preds = %15, %10
  %12 = load i32, i32* %2, align 4
  %13 = icmp slt i32 %12, 130
  br i1 %13, label %14, label %18

; <label>:14:                                     ; preds = %11
  store i32 80, i32* %6, align 4
  br label %15

; <label>:15:                                     ; preds = %14
  %16 = load i32, i32* %2, align 4
  %17 = add nsw i32 %16, 1
  store i32 %17, i32* %2, align 4
  br label %11

; <label>:18:                                     ; preds = %11
  br label %19

; <label>:19:                                     ; preds = %18
  %20 = load i32, i32* %1, align 4
  %21 = add nsw i32 %20, 1
  store i32 %21, i32* %1, align 4
  br label %7

; <label>:22:                                     ; preds = %7
  ret void