如何在React中使用Fine Uploader js

Question

嗨，我是Reactjs的新手。我正在使用fineuploader將文件上傳到server.i想創建FineUploader組件，以便我可以在任何地方使用它。

的package.json

{ 
    "name": "Sample", 
    "version": "1.0.0", 
    "description": "", 
    "main": "index.js", 
    "scripts": { 
    "test": "echo \"Error: no test specified\" && exit 1" 
    }, 
    "author": "", 
    "license": "ISC", 
    "dependencies": { 
    "babel-core": "^6.2.1", 
    "babel-loader": "^6.2.0", 
    "babel-preset-es2015": "^6.1.18", 
    "babel-preset-react": "^6.1.18", 
    "fine-uploader": "^5.7.1", 
    "react": "^0.14.6", 
    "react-dom": "^0.14.6", 
    "webpack": "^1.12.9", 
    "webpack-dev-server": "^1.14.0" 
    } 
} 

webpack.config.js

var path = require("path"); 

module.exports = { 
    entry: [ 
     './Components/Main.js' 
    ], 
    output:{ 
     path:__dirname, 
     filename:'bundle.js' 
    }, 
    resolve: { 
     alias: { 
      'fine-uploader': path.resolve('node_modules/fine-uploader/fine-uploader') 
     } 
    }, 
    module:{ 
     loaders: [ 
      { 
       test: /fine-uploader\.js/, 
       loader: 'exports?qq' 
      } 
     ], 
     loaders:[{ 
      test: /\.jsx?$/, 
      exclude:/node_modules/, 
      loader:'babel', 
      query:{ 
       presets: ['react'] 
      } 
     }] 
    } 
}; 

FineUploader.js

import React from 'react'; 

import qq from 'fine-uploader/fine-uploader'; 

class FineUploader extends React.Component { 
    constructor (props) { 
    super(props) 
    } 

    componentDidMount() { 
    const fu = new qq.FineUploaderBasic({ 
     button: this.refs.fu 
    }) 
    } 

    render() { 
    return <div ref='fu'>Upload!</div> 
    } 
} 

export default FineUploader; 

Main.js

import React from 'react'; 
import ReactDOM from 'react-dom'; 

import FineUploader from './FineUploader.js'; 

var MainContent = React.createClass({ 
    render:function(){ 
     return (
      <div> 
      <FineUploader /> 
      </div> 
     ); 
    } 
}); 

ReactDOM.render(<MainContent />,document.getElementById('container')); 

當我跑我得到下面的錯誤 遺漏的類型錯誤的應用：_fineUploader2.default.FineUploaderBasic是不是構造

我不力沒有什麼我做錯了，PLZ有人指導我

Answer 1

要使用精細上傳與之反應，你將需要componentDidMount lifecycle method中創建一個新的上傳實例。

Invoked once, only on the client (not on the server), immediately after the initial rendering occurs. At this point in the lifecycle, you can access any refs to your children (e.g., to access the underlying DOM representation).

精細上傳需要一個實際呈現的DOM元素爲它附加的事件處理程序，使其他的DOM元素作爲子女等

裏面的componentDidMount我們不僅瞭解我們的組件已經建立，但我們也有一個DOM元素，我們可以使用ref來引用它。

這裏有一個小例子組件：

class FineUploader extends React.Component { 

    componentDidMount() { 
    const fu = new qq.s3.FineUploaderBasic({ 
     button: this.refs.fu 
    }) 
    } 

    render() { 
    return <div ref='fu'>Upload!</div> 
    } 
} 

Answer 2

即使我的答案是不給問的問題完全相關，但我會建議作出反應，細上傳庫讓您的生活更輕鬆。

https://github.com/FineUploader/react-fine-uploader