Question

我正在尝试使用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 renderRoot @ 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.

Answer 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”的普通输入。

如何为我的react-dropzone应用解决“道具类型错误”

1 个答案: