React Dropzone问题：孩子不是一个功能答案

【问题标题】：React Dropzone issue : children is not a functionReact Dropzone问题：孩子不是一个功能
【发布时间】：2019-06-07 15:11:45
【问题描述】：

我已经在 react 应用中安装了 react dropzone。添加组件 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：我已经阅读了文档，但不是很清楚。这是我第一次实现这样的功能，你能解释一下如何以简单的方式解决这个问题吗？谢谢！

【问题讨论】：

检查您的 isDragActive 状态

标签： reactjs drag-and-drop react-dropzone

【解决方案1】：

正如错误消息所说，Dropzone 需要一个渲染函数，但您没有提供它。

渲染属性函数是您用来渲染任何内容的函数想基于Dropzone的状态。

你可以这样试试。

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

【讨论】：