React Dropzone问题：子代不是函数

Question

我已经在react应用程序中安装了react dropzone。添加组件放置区时，应用程序崩溃，并声称：

TypeError: children is not a function
Dropzone.render
node_modules/react-dropzone/dist/es/index.js:478
475 | var isMultipleAllowed = multiple || filesCount <= 1;
476 | var isDragAccept = filesCount > 0 && 
allFilesAccepted(draggedFiles, this.props.accept);
477 | var isDragReject = filesCount > 0 && (!isDragAccept ||!isMultipleAllowed);
> 478 | return children({
  | ^  479 |   isDragActive: isDragActive,
480 |   isDragAccept: isDragAccept,
481 |   isDragReject: isDragReject,

但是，一切似乎都很好。我的App.js是：

import React, { Component } from 'react';
import DropImg from './components/DropImg.js';

class App extends Component {
render() {
return (
  <div className="App">
   <DropImg />
  </div>
)}}
export default App;

组件DropImg为：

import React, {Component} from "react";
import Dropzone from "react-dropzone"

class DropImg extends Component{
render(){
    return(
        <div>
            <h1>Drop your file</h1>
            <Dropzone>Drop file here</Dropzone>
        </div>
    )}}

export default DropImg;

没有处理拖动和其他功能。只是一个非常基本的设置。但是它崩溃了。为什么？问题似乎来自react-dropzone包本身。

ps：我已经阅读了文档，但是不清楚。这是我第一次实现此功能，请您向我解释如何以简单的方式解决此问题？谢谢！

Answer 1

如错误消息所述，Dropzone期望提供渲染功能，但您未提供它。

呈现属性函数是用于根据的状态呈现任何内容的函数Dropzone。

您可以这样尝试。

<Dropzone>
  {dropzoneProps => {
    return (
      <div>
        <p>Drop some files here</p>
      </div>
    );
  }}
</Dropzone>;