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'));

当我运行应用程序时，我收到以下错误 未捕获TypeError：_fineUploader2.default.FineUploaderBasic不是构造函数

我不知道我做错了什么，Plz有人指导我

Answer 1

要在React中使用Fine Uploader，您需要在componentDidMount lifecycle method内创建一个新的上传器实例。

在初始渲染发生后立即仅在客户端（不在服务器上）调用一次。在生命周期的这一点上，您可以访问您孩子的任何引用（例如，访问底层DOM表示）。

Fine Uploader需要一个实际呈现的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

尽管我的答案与提出的问题并不完全相关，但我会推荐使用react-fine-uploader库来让您的生活更轻松。

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

如何在React js中使用Fine Uploader

2 个答案: