时间戳

首页 > 解决方案 > React Dropzone问题：孩子不是一个功能

reactjs - React Dropzone问题：孩子不是一个功能

问题描述

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

标签： reactjsdrag-and-dropreact-dropzone

解决方案

正如错误消息所说，Dropzone期待一个渲染功能，但您没有提供它。

render 属性函数用于根据Dropzone.

你可以这样试试。

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

推荐阅读