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元素设置唯一键，即卡片

 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

在React中通过数组映射

3 个答案: