一行中的三张牌，而不是一列中的所有牌答案

【问题标题】：Three cards in a row instead of all cards in one column一行中的三张牌，而不是一列中的所有牌
【发布时间】：2019-01-06 18:35:03
【问题描述】：

我正在使用材质 UI 的反应，我在一个数组中有 40 张动态卡片，当我渲染它们时，我想连续有 3 张卡片，并且我将所有卡片放在一列中。我正在使用这张卡： https://codesandbox.io/s/r084q99q34

【问题讨论】：

标签： reactjs material-ui

【解决方案1】：

也许你可以使用 Flexbox ？我遇到了同样的问题，感谢 FlexBox 槽材料 ui，我解决了它。另外，请务必使用优于或等于 4 的材料核心版本。希望对您有所帮助！

import React from 'react'
import { makeStyles } from '@material-ui/core/styles'
import {
    Grid,
    Card,
    CardContent,
    Typography,
    CardHeader
} from '@material-ui/core/'

const useStyles = makeStyles(theme => ({
    root: {
        flexGrow: 1,
        padding: theme.spacing(2)
    }
}))

export default function AltCard() {
    const classes = useStyles()
    const data = [
        { quarter: 1, earnings: 13000 },
        { quarter: 2, earnings: 16500 },
        { quarter: 3, earnings: 14250 },
        { quarter: 4, earnings: 19000 }
    ]
    return (
        <div className={classes.root}>
            <Grid
                container
                spacing={2}
                direction="row"
                justify="flex-start"
                alignItems="flex-start"
            >
                {data.map(elem => (
                    <Grid item xs={12} sm={6} md={3} key={data.indexOf(elem)}>
                        <Card>
                            <CardHeader
                                title={`quarter : ${elem.quarter}`}
                                subheader={`earnings : ${elem.earnings}`}
                            />
                            <CardContent>
                                <Typography variant="h5" gutterBottom>
                                    Hello World
                                </Typography>
                            </CardContent>
                        </Card>
                     </Grid>
                ))}
            </Grid>
        </div>
    )
}

【讨论】：

【解决方案2】：

您可以为此使用Grid 组件，例如

<Grid container spacing={24}>
  <Grid item md={3}>
    <Demo />
  </Grid>
  <Grid item md={3}>
    <Demo />
  </Grid>
  <Grid item md={3}>
    <Demo />
  </Grid>
</Grid>

https://codesandbox.io/s/rzmz5jnom

【讨论】：

我试过了。但我有 40 张动态卡片，所以我如何映射数组，每个“映射”渲染 3 张不同的卡片 EX：LOOP NUM 1：渲染 arr[0]，arr[1]，arr[2] LOOP NUM 2：渲染 arr[ 3],arr[4],arr[5]

【解决方案3】：

Material UI 提供GridList 和GridListTile 组件。这让你可以很好地配置它。

网格允许您定义列和单元格。 tile 占用一个插槽，它会不断地将它们安装在列中，并在需要时自动溢出它们。您可以在官方documents 中阅读更多内容，并查看他们的samples 以获得灵感。

let nums = Array.from(Array(40).keys());

  render(
    <GridList cols={3}>
      {nums.map(n => {
        return (
          <GridListTile key={n}>
            <Demo key={n} num={n} />
          </GridListTile>
        );
      })}
    </GridList>,
    rootElement
  );

查看分叉的沙箱：https://codesandbox.io/s/5yjpp339w4

如果由于某种原因内置组件不适合您的需求，或者如果网格仍然让您感到困惑，请查看他们的交互式 layout examples

【讨论】：

谢谢，但需要更具体一点：如果每张卡片都有一个日期（DD/MM/YYYY），是否可以只将具有相同日期的卡片放在一行？
网格系统允许您这样做...只需了解是什么构成了“瓷砖”/“单元格”/“GridListItem”...然后您必须根据自己的要求对其进行定制。 . 你可以根据你的数据对它们进行分组，甚至可以更改其中包含的项目，但你必须查看 MUI 的组件演示及其布局指南
如何使它成为动态的？即，我只希望在移动设备上每行一个元素，在桌面上每行 3 个元素