在 react dropzone 上传器的网格中设置图像答案

【问题标题】：set images in grid of react dropzone uploaders在 react dropzone 上传器的网格中设置图像
【发布时间】：2021-12-23 21:07:33
【问题描述】：

我在设置自定义预览时很困惑 image set in grid

我想在react-dropzone-uploader 自定义预览中执行此操作，我可以在其中上传多个文件。

当前场景：my normal uploaded images

代码sn-p：

const Preview = ({ meta }: IPreviewProps) => {
    const { name, percent, status, previewUrl } = meta ;
    return (
        <Grid item xs={6}>    
            <div className="preview-box">
                <img src={previewUrl} /> <span className="name">{name}</span> - <span className="status">{status}</span>{status !== "done" && <span className="percent"> ({Math.round(percent)}%)</span>}
            </div>
        </Grid>
    )
}
<Dropzone
      getUploadParams={getUploadParams}
      onSubmit={handleSubmit}
      PreviewComponent={Preview}
      inputContent="Drop Files"
    />

我正在使用 MUI V4 我们没有任何图像索引，如何使用材质 UI 在 2-2 图像的网格视图中设置图像？

【问题讨论】：

您使用 MUI v5 还是 v4？你能发布Preview 组件的父级吗？

标签： reactjs typescript material-ui dropzone.js

【解决方案1】：

您需要将 Grid 项目包装在 Grid 容器内。请看一下指南。 https://mui.com/components/grid/

// Parent PreviewContainer.js

...
<Grid container spacing={2}>
  {
    images.map((image, i) => (
      <PreviewItem key={i} meta={meta} />
    ))
  }
</Grid>
...

// Child PreviewItem.js

...
<Grid item xs={4}>
  // You can update the item size as you expect, but it seems like it should be 4 regarding the image attached
  // Your preview component
</Grid>
...

【讨论】：