0

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

警告：失败的道具类型：children提供array 给的道具类型无效Dropzone，预期function. 在 Dropzone (at MyEditor.js:145) 在 MyEditor (at App.js:15) 在 div (at App.js:14) 在 div (at App.js:10) 在 App (at 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 render@ 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 renderRoot @ react-dom.development.js:20205 performWorkOnRoot @ react-dom.development.js:21162 performWork @ react-dom.development.js:21072 performSyncWork @ react-dom。 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。块.js:1

我试图添加一个 getRootprops() 就像它在文档中所说的那样，但我仍然遇到了这个问题。这是一个指向损坏组件可见的仓库的链接。

4

1 回答 1

0

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

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

<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>

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

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

于 2019-02-21T23:57:18.293 回答