DropzoneDialog中添加复选框失效的技术问题咨询

我之前也碰到过一模一样的情况，DropzoneDialog（应该是来自mui-dropzone包的组件吧？）并不会直接渲染你传入的子元素——因为它的内部布局是固定的，得用组件专门提供的属性来注入自定义内容才行。

问题根源 #

DropzoneDialog的默认实现里，并没有把children属性的内容渲染到弹窗的可见区域中，所以你直接把Checkbox作为子元素传进去，自然不会显示出来。

解决方案 #

使用组件的customContent属性来传递你的复选框内容，这个属性就是专门用来往弹窗内部添加自定义内容的。修改后的代码如下：

<DropzoneDialog
  acceptedFiles={['image/*', 'application/pdf', 'application/txt', 'text/plain']}
  cancelButtonText={"cancel"}
  submitButtonText={"submit"}
  maxFileSize={5000000}
  filesLimit={1}
  open={openUpload}
  onClose={() => setUploadOpen(false)}
  onSave={(files) => {
    const reader = new FileReader();
    reader.addEventListener('load', async () => {
      // 这里处理文件加载后的逻辑
    });
    reader.readAsArrayBuffer(files[0]);
  }}
  showPreviews={true}
  showFileNamesInPreview={true}
  // 用customContent传入自定义复选框
  customContent={
    <FormControlLabel
      control={<Checkbox name="IsInvoice" color="primary" />}
      label="Is Invoice"
    />
  }
/>

额外说明 #

如果你用的是新版@mui/x-file-upload中的DropzoneDialog组件，API会有差异，需要通过DropzoneDialogContent组件来包裹自定义内容：

// 新版@mui/x-file-upload的写法示例
<DropzoneDialog
  // 其他属性保持不变
>
  <DropzoneDialogContent>
    <FormControlLabel
      control={<Checkbox name="IsInvoice" color="primary" />}
      label="Is Invoice"
    />
  </DropzoneDialogContent>
</DropzoneDialog>

核心思路就是别直接传子元素，要利用组件提供的自定义内容入口来添加你的复选框~

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