Question

我正在通过Dropzone使用简单的拖放功能，但不知何故出现以下错误：“警告：道具类型失败：提供给children的类型string的无效道具Dropzone，预期{ {1}}。”我不知道这是什么，我已经检查过问题是否出在此页面以外的其他地方

function

我想要的是简单的拖放或选择并推送一些图像

Answer 1

尝试以下操作：

<Dropzone
    onDrop={() => this.handleOnDrop()}
    multiple={false}
    maxSize={MaxSize}
>
    { () => Drop image here or click to upload }
</Dropzone>

以下是有用的链接：https://www.robinwieruch.de/react-render-props-pattern/

Answer 2

实际上，这没有用，因为他们更改了 DOCS 或其他内容，但是我不得不更改所有代码，并用此代码替换

import React, { Component } from "react";
import Dropzone from "react-dropzone";


const maxSize = 1048576; //1mb
class DragAndDrop extends Component {
  onDrop = acceptedFiles => {
    console.log(acceptedFiles);
  };
  render() {
    return (
      <div>
        <Dropzone
          onDrop={this.onDrop}
          accept="image/png, image/gif image/jpg"//whatever the file type needed
          minSize={0}
          maxSize={maxSize}
          multiple
        >
          {({
            getRootProps,
            getInputProps,
            isDragActive,
            isDragReject,
            rejectedFiles
          }) => {
            const isFileTooLarge =
              rejectedFiles.length > 0 && rejectedFiles[0].size > maxSize;
            return (
              <div {...getRootProps()}>
                <input {...getInputProps()} />
                {isDragActive
                  ? "Drop it when it's hot!"
                  : "Click me or drag a file to upload!"}
                {isDragActive && !isDragReject && "Drop it like it's hot!"}
                {isDragReject && "File type not accepted, sorry!"}
                {isFileTooLarge && (
                  <div>File is too large.</div>
                )}
              </div>
            );
          }}
        </Dropzone>
      </div>
    );
  }
}
export default DragAndDrop;

警告：道具类型失败：提供给“ Dropzone”的“字符串”类型的无效道具“子级”，预期是“功能”

2 个答案: