如何使用 Material-UI 在 React 中迭代的信息制作 2 列

Question

我正在使用 Grid 制作一个组件。 我想要发生的是信息显示在两列中，而不仅仅是我得到的那一列。 我不知道如何实现这一点，我知道是否可以添加另一个 Grid 部分，其中另一个 sm={6} 将填充两列，但我没有其他信息可以放入另一个 Grid 中全部来自我的 map function。

const renderData = (person, picture, index) => {
        return (
            <Paper className={classes.Paper}>
                <img src={person.picture.large} />
            </Paper>
        )
    }
return (
        <div className={classes.sectionContainer}>
            <h3 className={classes.title}>Follow our instagram!</h3>
            <h3 className={classes.title}>@platformdanceshowcase</h3>
            <Grid container spacing={1}>
                {previewData.slice(0, visible).map(renderData)}
            </Grid>
            <Container className={classes.extendButtonArea}>
                {visible < previewData.length && (
                    <Button className={classes.extendButton} onClick={loadMore}>
                        View More...
                    </Button>
                )}
            </Container>
        </div>
    )
}

您可以在此主题上提供的任何帮助将不胜感激，因为我已将自己陷入困境。 提前致谢！

Answer 1

在文档之后，列是带有item道具的组件。 它替换了父级中使用的容器道具。

例子：

<Grid container spacing={1}>
   {previewData.slice(0, visible).map((person, picture, index) => (
      <Grid item key={index}>...</Grid>
   )}
</Grid>

我不使用 Material ui 所以试试吧。

来源： https://material-ui.com/components/grid/

Answer 2

在 Material UI 文档中有以下示例：

<Grid container spacing={{ xs: 2, md: 3 }} columns={{ xs: 4, sm: 8, md: 12 }}>
  {Array.from(Array(6)).map((_, index) => (
    <Grid item xs={2} sm={4} md={4} key={index}>
      <Item>xs=2</Item>
    </Grid>
  ))}
</Grid>