如何解决我的 react-dropzone 应用程序的“道具类型错误”答案

【问题标题】：How to solve 'prop type error' for my react-dropzone app如何解决我的 react-dropzone 应用程序的“道具类型错误”
【发布时间】：2019-02-21 23:20:14
【问题描述】：

我正在尝试使用 react dropzone 构建一个应用程序来处理文件上传。几个小时以来，我一直在为这个错误摸不着头脑。

警告：失败的道具类型：无效的道具children 类型为array 提供给Dropzone，预计function。在 Dropzone (在 MyEditor.js:145) 在 MyEditor 中（在 App.js:15）在 div 中（在 App.js:14）在 div 中（在 App.js:10）在 App 中（在 src/index.js:7）function.console.（匿名函数）@ index.js:1446 printWarning @ checkPropTypes.js:21 checkPropTypes @ checkPropTypes.js:76 validatePropTypes @ react.development.js:1716 createElementWithValidation@react.development.js:1809 渲染@ MyEditor.js:145 finishClassComponent @ react-dom.development.js:15119 updateClassComponent @ react-dom.development.js:15074 beginWork @ react-dom.development.js:16064 performUnitOfWork @ react-dom.development.js:20084 workLoop @ react-dom.development.js:20125 渲染根@ react-dom.development.js:20205 performWorkOnRoot @ react-dom.development.js:21162 performWork @ react-dom.development.js:21072 performSyncWork @ react-dom.development.js:21046 requestWork @ react-dom.development.js:20901 scheduleWork @ react-dom.development.js:20714 scheduleRootUpdate @ react-dom.development.js:21409 updateContainerAtExpirationTime @ react-dom.development.js:21435 updateContainer @ react-dom.development.js:21503 ReactRoot.render @ react-dom.development.js:21816（匿名）@ react-dom.development.js:21968 unbatchedUpdates @ react-dom.development.js:21291 legacyRenderSubtreeIntoContainer @ react-dom.development.js:21964 渲染@ react-dom.development.js:22039 （匿名）@index.js:7 ./src/index.js@main.chunk.js:78 webpack_require @ bundle.js:782 fn @ bundle.js:150 0 @ main.chunk.js:161 webpack_require @bundle.js:782 checkDeferredModules @bundle.js:46 webpackJsonpCallback @bundle.js:33（匿名）@ main.chunk.js:1

我已尝试添加 getRootprops() ，就像它在文档中所说的那样，但我仍然遇到问题。 Here's a link to the repo where the broken component is visible.

【问题讨论】：

标签： reactjs dropzone.js react-dropzone

【解决方案1】：

您必须将函数放入 Dropzone 组件中，如官方文档中所述。您可以自己在错误中看到它。 Drozone 的children 需要一个功能才能正常工作。

我有一个来自我自己项目的工作示例：

<Dropzone onDrop={this.onDrop}>
  {
    ({ getRootProps, getInputProps }) => {
      return (
        <div {...getRootProps()} className="image-dropzone">
          <input {...getInputProps()} />
          <div className="preview-container">
            <div className="preview">
              {
                !isEmpty(files) ? (
                  <img src={files[0].preview} alt={files.name} />
                ) : (
                  <span>your thumbnail goes here...</span>
                ) 
              }
            </div>
          </div>
        </div>
      )
    }
  }
</Dropzone>

在用户通过 react-dropzone 添加图像后，此代码在 files 属性上预览图像。

您可以尝试适应您的代码。基本上，您需要在Dropzone 组件内的函数内部进行输入，并且输入的作用类似于 type="file" 的普通输入。

【讨论】：