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

【问题标题】：How to make 2 columns with information that is iterated in React using Material-UI如何使用 Material-UI 在 React 中迭代的信息制作 2 列
【发布时间】：2021-03-26 13:47:56
【问题描述】：

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

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>
    )
}

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

【问题讨论】：

标签： javascript css reactjs material-ui grid

【解决方案1】：

按照文档，列是带有 item 属性的组件。它替换了 Parent 中使用的容器道具。

例子：

<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/

【讨论】：

是的，我明白这一点。最初我的网格项目 sm={6}... 但它仍然只显示一个列网格，作为测试，我添加了另一个网格项目 sm={6}。哪个有效，它制作了两列，但是因为我正在使用 map 函数迭代以在列内创建数据，所以我不能两次调用我的 map 函数，因为它只显示 2 列但两者中的信息相同。回到我的问题，当你只有一张地图可以迭代时，如何让网格显示两列？

【解决方案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>

【讨论】：