如何使用 React 和 Material-UI 网格制作 2 列，只有一个地图可以迭代

Question

我正在使用 Material-UI 网格。我想要做的是在两列中显示从我的地图函数迭代的信息。但是，目前它仅显示在 1 列中。作为测试，我添加了另一个网格项 sm={6} 并使用了相同的地图功能。实现了 2 列，但是两列都显示完全相同的信息。我的问题是，当只有 1 个地图函数要迭代时，如何将网格分成两列？

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 direction='row' container spacing={1}>
               <Grid item sm={6}>
                {previewData.slice(0, visible).map(renderData)}
               </Grid>
            </Grid>
            <Container className={classes.extendButtonArea}>
                {visible < previewData.length && (
                    <Button className={classes.extendButton} onClick={loadMore}>
                        View More...
                    </Button>
                )}
            </Container>
        </div>
    )
}

如能提供任何帮助，我们将不胜感激。自己绕了一圈，越来越迷茫了，先谢过了！

Answer 1

很难从问题中准确判断出您想要做什么，也许您可以标记屏幕截图或提供您想要实现的目标的小草图？

我不太确定为什么你的 renderData 组件中有 2 个 return 函数，但我会将第一个解释为 previewData 数组元素的代表，将第二个解释为列您在问题中描述的元素。

我对您的问题的解释是，您需要并排显示 previewData 中从索引 0 到可见的数据的两列。实现这一目标的一种方法可能是像这样修改您的代码：

<Grid direction='row' container spacing={1}>
    <Grid container item sm={6}>
        {previewData.slice(0, visible).map((renderData, i) => 
            i % 2 == 0 ? renderData : <></>)}
    </Grid>
    <Grid container item sm={6}>
        {previewData.slice(0, visible).map((renderData, i) => 
            i % 2 == 1 ? renderData : <></>)}
    </Grid>
</Grid>

map 函数提供了与索引对应的第二个参数，因此您可以使用该参数跨列分配元素。您还可以轻松地对其进行重新配置，以在左侧显示项目的前半部分，在右侧显示项目的后半部分。

<Grid direction='row' container spacing={1}>
    <Grid container item sm={6}>
        {previewData.slice(0, Math.Floor(visible / 2)).map(renderData)}
    </Grid>
    <Grid container item sm={6}>
        {previewData.slice(Math.Ceil(visible / 2), visible).map(renderData)}
    </Grid>
</Grid>

如何使用 React 和 Material-UI 网格制作 2 列，只有一个地图可以迭代

How to make 2 columns with React and Material-UI Grid with only one map to iterate over

css

grid

dictionary

reactjs

material-ui