javascript - 如何使用 Material-UI 在 React 中迭代的信息制作 2 列
问题描述
我正在使用 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>
)
}
您可以在此主题上提供的任何帮助将不胜感激,因为我已将自己陷入困境。提前致谢!
解决方案
在 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>
推荐阅读
- android - 在初始化中触发微调器选定的项目更改事件
- qt - QT 优化程序以特定时间间隔执行计算(信号和 QTimer 已过)
- perforce - 如何在 P4v 中更改我的工作区名称?
- azure - Azure AD B2C 自定义策略 - 仅使用 String.Format 删除连字符
- java - Hibernate实体级联删除父或子
- c# - C# 调用 PowerShell New-Session 不返回结果
- ios - Apple 在导航堆栈中使用的后退按钮图形在哪里?
- wakanda - 在 Wakanda 2.4+ 中提供原型页面
- python - request.FILES 在 Django 上空上传图片
- python-3.x - 解析数组中的字典键值