如何在 React Dropzone Uploader 中保留我的自定义预览组件？答案

【问题标题】：How can I persist my custom preview component in React Dropzone Uploader?如何在 React Dropzone Uploader 中保留我的自定义预览组件？
【发布时间】：2020-10-14 15:21:33
【问题描述】：

react-dropzone-uploader npm package 中的我的DropzoneUploader 组件有一个自定义预览组件，可用于显示目的。当我使用react-router-dom 导航到我的应用程序中的另一条路线时，组件会卸载。当我使用组件导航到路线时，可选的预览组件不再具有数据。就好像预览组件有一个开/关开关；它在执行操作时打开，并在组件卸载时关闭（显然）。

预览组件仅在按下提交按钮时呈现，或者在您将文件拖放到区域中时将 autoUpload 设置为 true。 docs 没有给出保留自定义预览组件的明确方法。

<Dropzone
    inputContent={<DragAndDropText key={uuid()}/>}
    getUploadParams={getUploadParams}
    classNames={classNames}
    maxFiles={1}
    accept=".dwg,.dxf"
    PreviewComponent={PreviewComponent}
    autoUpload={true}
    maxSizeBytes={21000000}
    onChangeStatus={handleChangeStatus}
    initialFiles={file}
/>

【问题讨论】：

标签： reactjs

【解决方案1】：

原来initialFiles arg 只需要是一个数组，而不是实际的文件：

<Dropzone
    inputContent={<DragAndDropText key={uuid()}/>}
    getUploadParams={getUploadParams}
    classNames={classNames}
    maxFiles={1}
    accept=".dwg,.dxf"
    PreviewComponent={PreviewComponent}
    autoUpload={true}
    maxSizeBytes={21000000}
    onChangeStatus={handleChangeStatus}
    initialFiles={file} // this is wrong
/>

initialFiles={[file]} 是正确的格式。使用 redux 存储输入文件，我可以使用 initialFiles={file ? [file] : null} 有条件地渲染

【讨论】：