Реагируйте на проблему Dropzone: дети - это не функция

Question

Я установил реакционную дропзону в приложении реакции. При добавлении компонента 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;

Нет функций для обработки перетаскивания и еще много чего. Просто очень простая настройка. Все же это терпит крах. Зачем? Кажется, проблема связана с самим пакетом Reaction-Dropzone.

ps: я прочитал документацию, но она не была кристально чистой. Я впервые реализую такую ​​функцию, не могли бы вы объяснить, как решить эту проблему простым способом? Спасибо!

Answer 1

Как говорится в сообщении об ошибке, Dropzone ожидает функцию рендеринга, но вы ее не предоставили.

Функция свойства рендера - это то, что вы используете для рендеринга того, что вы хочу на основе состояния Dropzone.

Вы можете попробовать это так.

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