React-Dropzone：我无法将缩略图图像放入 dropzone答案

【问题标题】：React-Dropzone: I can't put my thumbnail image inside dropzoneReact-Dropzone：我无法将缩略图图像放入 dropzone
【发布时间】：2019-04-08 08:41:49
【问题描述】：

我的图像的缩略图预览在我的放置区之外（它显示在下面）。如何让它显示在 dropzone / 而不是 dropzone 中？

这是我的代码：

   <ReactDropzone
            accept="image/*"
            onDrop={this.onDrop}
            style={{"width" : "100%", "height" : "25vw", "background" : "lightGrey",}}
          >
            <Typography
              color='inherit'
              align='center'
              syle={{"verticalAlign" : "center"}}
              marginTop='20'
            >
            <br/><br/><br/>
            <svg xmlns="http://www.w3.org/2000/svg" justifyContent="center" width="30%" height="30%" viewBox="0 0 24 24" color="white"><path d="M9 16h6v-6h4l-7-7-7 7h4zm-4 2h14v2H5z"/></svg>
            <div>Upload or Drop photo here</div>
            </Typography>
      </ReactDropzone>

使用 ReactDropzone 配置：

  dropzone: {
padding: theme.spacing.unit * 0,
img: {
  borderRadius: '10px',
  verticalAlign: 'bottom',
  width: '10',
  maxHeight: '95%'
}

【问题讨论】：

标签： javascript reactjs dropzone.js dropzone react-dropzone

【解决方案1】：

我把它放在<ReactDropzone> 组件中：

  <Dropzone
    className = 'defaultDropzone'
    accept={acceptedFileTypes}
    onDrop={this.handleOnDrop}
    maxSize={imageMaxSize}
  >
    {files.length > 0 ? <img src = {files[0].preview} /> :
      <div className = "dropzone">
        <i className= 'fa fa-cloud-upload'/>
        <span> Drop file or click here to upload photo </span>
      </div>
    }
  </Dropzone>

【讨论】：