使用 reactjs Material ui 在 3 列中显示我的卡片答案

【问题标题】：Display my cards in 3 columns using reactjs Material ui使用 reactjs Material ui 在 3 列中显示我的卡片
【发布时间】：2020-12-13 20:36:55
【问题描述】：

我正在尝试从 API 检索图像并将它们显示在三列网格系统中。当我检索图像时，它们彼此下方显示。请告知实现这一目标的最佳方法

import React from "react";
import Display from "./Display";

class App extends React.Component {
  constructor() {
    super();
    this.state = {
      loading: true,
      image: [],
    };
  }

  async componentDidMount() {
    const url = "http://jsonplaceholder.typicode.com/photos?_start=0&_limit=10";
    const response = await fetch(url);
    const data = await response.json();
    this.setState({ image: data, loading: false });
    console.log(data);
  }

  render() {
    if (this.state.loading) {
      return <div> loading ... </div>;
    }
    if (!this.state.image.length) {
      return <div> didnt get an image</div>;
    }

    return (
      <div>
        {this.state.image.map((img) => (
          <div>
            <div>
              {" "}
              <Display
                showImage={img.url}
                showTitle={img.title}
                showAlbum={img.albumId}
              />{" "}
            </div>
            <div key={img.id}>
              <ul></ul>
            </div>
          </div>
        ))}
      </div>
    );
  }
}

export default App;


function Display(props) {
  const classes = useStyles();

  return (
    <div className={classes.root}>
      <Grid container spacing={4}>
        <Grid item xs={12} sm={6} md={4}>
          <CardActionArea>
            <CardMedia
              component="img"
              alt="Contemplative Reptile"
              height="200"
              width="200"
              img
              src={props.showImage}
            />
            <CardContent>
              <Typography gutterBottom variant="h5" component="h2">
                {props.showTitle}
              </Typography>
              <Typography variant="body2" color="textSecondary" component="p">
                Album ID: {props.showAlbum}
              </Typography>
            </CardContent>
          </CardActionArea>
          <CardActions>
            <Button size="small" color="primary">
              Share
            </Button>
            <Button size="small" color="primary">
              Learn More
            </Button>
          </CardActions>
        </Grid>
      </Grid>
    </div>
  );
}
export default Display;

在我的 App.js 中，我能够使用地图功能并从数组中获取所有项目，我想我应该修改我的 App.jS 文件以打印出三列中的结果，但我'我不确定。我可以修改显示文件以使每张卡都紧挨着吗？我需要为卡片使用另一个数组吗？

【问题讨论】：

标签： reactjs material-ui

【解决方案1】：

您可以在渲染方法中将 display flex 添加到父 div 作为默认 flexDirection = 'row'

render() {
    if (this.state.loading) {
      return <div> loading ... </div>;
    }
    if (!this.state.image.length) {
      return <div> didnt get an image</div>;
    }

    return (
      <div style={{display:"flex"}}>  //added display flex
        {this.state.image.map((img) => (
          <div>
            <div>
              {" "}
              <Display
                showImage={img.url}
                showTitle={img.title}
                showAlbum={img.albumId}
              />{" "}
            </div>
            <div key={img.id}>
              <ul></ul>
            </div>
          </div>
        ))}
      </div>
    );
  }

【讨论】：