React使用Material-UI Grid布局map渲染卡片如何实现溢出自动换行

问题根源 #

你的代码不符合Material UI Grid组件的布局规则：Grid container的直接子元素必须为Grid item组件，你通过map批量渲染的没有嵌套在Grid item内，无法触发Grid自带的响应式换行、间距适配能力，因此出现布局异常。

最优解决步骤 #

1. 批量渲染卡片时，给每个外层包裹Grid item组件，配置和单独写卡片时一致的响应式断点属性即可。
2. 无需额外修改Grid container的现有配置，Grid container默认已开启flex-wrap: wrap属性，只要子元素都是合法的Grid item，超出容器宽度后就会自动换行。

修正后代码示例 #

<div>
    <Grid container spacing={4}
        direction="row"
        justifyContent="space-evenly"
        alignItems="center"
        style={{ minHeight: '80vh' }}
    >
        {/* 原有单独定义的卡片 */}
        <Grid item xs={3} sm={6} md={4}>
            {/* 此处为原有卡片内容 */}
        </Grid>
        {/* 批量渲染的卡片 */}
        {this.state.coupons.map(c => (
            <Grid item xs={3} sm={6} md={4} key={c.id}>
                <Card2 coupon={c} />
            </Grid>
        ))}
    </Grid>
</div>

注意事项 #

列表渲染的key属性需要挂载在循环返回的根节点（即当前的Grid item组件）上，符合React列表渲染的最佳实践，可避免不必要的重渲染异常。

内容的提问来源于stack exchange，提问作者Fastaca Girasol