reactjs 自定义材料-用户界面-放置区域的放置区域

mrzz3bfm  于 2023-02-08  发布在  React
关注(0)|答案(1)|浏览(394)

除了简单的dropZoneText和图标 prop 外,我想自定义DropZoneArea的外观。我已经成功地完成了,但是我得到了下面的react警告Failed prop type: Invalid prop 'dropzoneText' of type 'object' supplied to 'DropzoneAreaBase', expected string
我知道问题是什么,但我想知道是否有人知道如何准确地定制它。
默认值如下所示:

我想要以下内容:

我可以通过重写dropZoneText属性使其工作,如下所示:

<DropzoneArea
  filesLimit={1}
  showAlerts={false}
  classes={{ root: clsx([classes.dropZoneRoot, uploading ? classes.disableClick : null]) }}
  showPreviewsInDropzone={false}
  showFileNames={false}
  dropzoneClass={classes.dropZone}
  Icon={''}
  dropzoneText={
    <Box className={classes.customDropZone} px={16} py={6} display="flex" flexDirection="column" justifyContent="center" alignItems="center" gridGap={4}>
      {uploading && (
        <Box className={classes.customDropZoneLoader} display="flex" flexDirection="column" justifyContent="center" alignItems="center">
          <CircularProgress size="2rem" />
        </Box>
      )}
      <Typography variant="subtitle1">Drop your file here</Typography>
      <Typography>or</Typography>
      <Box mt={1}>
        <Button color="primary" variant="outlined" style={{ width: 125 }}>
          Select File
        </Button>
      </Box>
      <Box mt={1}>
        <Typography>
          Accepted file types: <br />
          <strong>.png, .jpg, .gif, .txt, .csv, .doc, .docx, .xls, .xlsx, .pdf</strong>
        </Typography>
      </Box>
      <Box mt={1}>
        <Typography>
          Maximum file size: <strong>20MB</strong>
        </Typography>
      </Box>
    </Box>
  }
  maxFileSize={20971520}
  acceptedFiles={[
    'application/pdf, application/msword, application/vnd.openxmlformats-officedocument.wordprocessingml.document, application/vnd.ms-excel, application/vnd.openxmlformats-officedocument.spreadsheetml.sheet, image/jpeg, image/png, application/txt, text/tab-separated-values, text/csv, application/csv, text/x-csv, application/x-csv, text/comma-separated-values, text/x-comma-separated-values'
  ]}
  onChange={onFileDropped}
  onDropRejected={onFileRejected}
>                    
</DropzoneArea>

有没有人知道一个更好的方法来做到这一点,而不是得到警告?无论它的价值,它的工作完美的罚款,但只是抛出警告在控制台。

rqqzpn5f

rqqzpn5f1#

不幸的是,似乎该仓库的维护者没有能力修复它。https://github.com/Yuvaleros/material-ui-dropzone/issues/35-这是一个相当旧的仓库,所以我怀疑它是否会得到修复。
如果您使用的是Typescript,则可以将 Package 器强制转换为字符串以使DropzoneArea组件满意,但问题在于库本身没有将object / ReactNode用作预期类型。
如果您真的想尝试修复这个问题,可以使用patch-package这样的npm包为您的项目在本地修复它。https://www.npmjs.com/package/patch-package

相关问题