使用fineuploader和react-rails

Question

我正在嘗試使用fineuploader with react並安裝了所有相關的依賴項。 以下是我使用的代碼： -

 import React, { Component } from 'react' import FineUploaderTraditional from 'fine-uploader-wrappers' import Gallery from 'react-fine-uploader' import 'react-fine-uploader/gallery/gallery.css' const uploader = new FineUploaderTraditional({ options: { chunking: { enabled: true }, deleteFile: { enabled: true, endpoint: '/uploads' }, request: { endpoint: '/uploads' }, retry: { enableAuto: true } } }) class UploadComponent extends Component { render() { return ( <Gallery uploader={uploader} /> ) } } export default UploadComponent 

但我得到以下錯誤： -

Uncaught Error: Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: undefined. You likely forgot to export your component from the file it's defined in. Check the render method of `Gallery`.
at invariant (invariant.js?7313:44)
at instantiateReactComponent (instantiateReactComponent.js?e676:74)
at instantiateChild (ReactChildReconciler.js?c86a:44)
at eval (ReactChildReconciler.js?c86a:71)
at traverseAllChildrenImpl (traverseAllChildren.js?5edf:77)
at traverseAllChildrenImpl (traverseAllChildren.js?5edf:93)
at traverseAllChildrenImpl (traverseAllChildren.js?5edf:93)
at traverseAllChildren (traverseAllChildren.js?5edf:172)
at Object.instantiateChildren (ReactChildReconciler.js?c86a:70)
at ReactDOMComponent._reconcilerInstantiateChildren (ReactMultiChild.js?e1f8:185)

警告：React.createElement：type無效 - 期望一個字符串（對於內置組件）或一個類/函數（對於復合組件）但得到：undefined。 您可能忘記從其定義的文件中導出組件。檢查`Gallery`的render方法。
在Gallery中（由UploadComponent創建）
在UploadComponent中

我一直在關注反應的fineuploader文檔，我嘗試了一些不同的東西，但似乎沒有任何工作。

Answer 1

問題是一些未滿足的依賴，在我的例子中是：

react-transition-group@1.x

我有

react-transition-group@2.x

刪除2.x並安裝1.2.1修復了問題。

密切關注您嘗試配置的任何軟件包的安裝依賴性。

感謝反應精細上傳所有者rnicholus的幫助。

Answer 2

我認為你必須從模塊導入Gallery組件。

import Gallery from 'react-fine-uploader'

更新：
也嘗試在一個div內包裝Gallery

class UploadComponent extends Component {
    render() {
        return (
          <div>
            <Gallery uploader={uploader} />
          </div>
        )
    }
}