react-dropzone-uploader配合MUI V4如何实现2列网格图片预览？

实现方案 #

你遇到的核心问题是Grid网格布局缺少外层容器包裹所有预览项，MUI 的网格规则要求所有Grid item必须放在Grid container下才会自动按比例排布换行，不需要获取图片索引也能实现每行2张的效果。

1. 先自定义预览容器组件

新增一个容器组件用来包裹所有生成的预览项，配置网格容器属性：

import { Grid } from '@material-ui/core';

// 自定义预览容器
const PreviewContainer = ({ previews }) => {
  return (
    <Grid container spacing={2}>
      {/* previews 就是所有你自定义的Preview组件实例 */}
      {previews}
    </Grid>
  )
}

2. 调整你的Preview组件（仅需补充可选样式优化）

你原来的Grid item xs={6}配置已经符合每行2张的要求，只需要补充样式避免图片溢出变形即可：

const Preview = ({ meta }: IPreviewProps) => {
    const { name, percent, status, previewUrl } = meta ;
    return (
        <Grid item xs={6}>    
            <div className="preview-box" style={{ width: '100%' }}>
                <img 
                    src={previewUrl} 
                    style={{ width: '100%', height: 120, objectFit: 'cover', borderRadius: 4 }} 
                    alt={name}
                />
                <span className="name">{name}</span> - <span className="status">{status}</span>
                {status !== "done" && <span className="percent"> ({Math.round(percent)}%)</span>}
            </div>
        </Grid>
    )
}

3. 给Dropzone组件指定自定义容器

在Dropzone配置中加入PreviewContainer属性即可生效：

<Dropzone
      getUploadParams={getUploadParams}
      onSubmit={handleSubmit}
      PreviewComponent={Preview}
      // 新增这一行指定自定义容器
      PreviewContainer={PreviewContainer}
      inputContent="Drop Files"
/>

xs={6}表示在所有尺寸的屏幕下每个预览项占6份（共12份）宽度，自动会每2个项换一行。如果需要调整预览项之间的间距，修改Grid container上的spacing参数即可，MUI v4中spacing={n}对应间距为n*8px。

内容的提问来源于stack exchange，提问作者Tanuj Doshi