react-dropzone报错TypeError: children is not a function原因求解

报错根因 #

• react-dropzone v10及以上版本强制要求<Dropzone>组件的子元素必须为函数类型（即render props写法），该函数用于接收拖拽相关的状态、方法参数，返回自定义的拖拽区域UI结构。你当前代码中<Dropzone>标签内部为空，没有传入符合要求的子元素，因此触发children is not a function类型错误。

正确用法示例 #

你可以参考以下基础写法调整代码：

<Dropzone accept=".csv" onDropAccepted={this.onDrop.bind(this)}>
  {({ getRootProps, getInputProps, isDragActive }) => (
    <div {...getRootProps({ style: { padding: '20px', border: '2px dashed #ccc' } })}>
      <input {...getInputProps()} />
      {
        isDragActive ?
          <p>释放CSV文件即可上传</p> :
          <p>拖拽CSV文件到此处，或点击选择本地CSV文件</p>
      }
    </div>
  )}
</Dropzone>

示例中函数接收的getRootProps是需要绑定到拖拽容器DOM的属性集合，getInputProps是绑定到内置文件输入框的属性集合，isDragActive是标识当前是否有文件悬停在拖拽区域的状态值，你可以根据业务需求自定义内部渲染的UI内容。

内容的提问来源于stack exchange，提问作者Shravan Khar