javascript - 警告：道具类型失败：提供给“Dropzone”的“字符串”类型的无效道具“孩子”，应为“功能”

Question

我正在通过 Dropzone 使用简单的拖放功能，但不知何故出现了“警告：道具类型失败：提供给children的类型无效道具，预期”的错误。我不知道它是什么 Na d 我已经检查过问题不存在于除此页面之外的任何其他地方stringDropzonefunction

import React, { Component } from "react";

import Dropzone from "react-dropzone";

const MaxSize = 1000000000; //
class DragAndDrop extends Component {
  handleOnDrop = (files, rejectedFiles) => {
    console.log(files);
    console.log("rejected files are:", rejectedFiles);
    if (rejectedFiles && rejectedFiles.length > 0) {
      const currentRejectFile = rejectedFiles[0];
      const currentRejectFileType = currentRejectFile.type;
      const currentRejectFileSize = currentRejectFile.size;
      if (currentRejectFileSize > MaxSize) {
        alert(
          "This file is not allowed. " +
            currentRejectFileSize +
            currentRejectFileType +
            " too large"
        );
      }
    }

    if (files && files.length > 0) {
      const currentFile = files[0];
      const currentFileType = currentFile.type;
      const currentFileSize = currentFile.size;
      if (currentFileSize > MaxSize) {
        alert(
          "This file is not allowed. " +
            currentFileSize +
            currentFileType +
            " too large"
        );
      }
    }
  };

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

export default DragAndDrop;

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

标签： javascriptreactjsdropzone.js

Answer 1

实际上它没有用，因为他们更改了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;