从我的React组件中的第三方组件实例调用操作

Question

我有以下代码，其中我的React组件中我使用的是第三方组件 - 在我的情况下是FineUploader。

上传文件后，它会调用onComplete函数。从这里开始，我试图调用我的动作创建者来处理上传后的进程，但是我无法从那里访问我的props或actions，因为这些都在我的组件之外。

到目前为止，一切正常。我可以从我的组件调用uploader实例并将文件上传到我的Azure Blob存储，并在上传完成后获取fileName和blobName。

有趣的是，我被困在更容易的部分！

这是我的组件：

import React, { Component } from 'react';
import { connect } from 'react-redux';
import { bindActionCreators } from 'redux';
import FineUploaderAzure from 'fine-uploader-wrappers/azure'

// Components
import Gallery from './gallery/index';

// Actions
import * as myActions from '../myActions';

// Instantiate FineUploader
const uploader = new FineUploaderAzure({
    options: {
        cors: {
            expected: true,
            sendCredentials: false
        },
        signature: {
            endpoint: 'http://localhost:123/getsas'
        },
        request: {
            endpoint: 'https://myaccount.blob.core.windows.net/my-container'
        },
        callbacks: {

            onComplete: function (id, name, responseJSON, xhr) {

                const fileName = uploader.methods.getName(id);
                const blobName = uploader.methods.getBlobName(id);

                // I now need to call my action creator to handle backend stuff
                // Or I can call the handleFileUpload function inside my component.
                // How do I access either my action creator or handleFileUpload function from here?

            }
        }
    }
})

class FileUploader extends Component {

    constructor(props) {

        super(props);
        this.handleFileUpload = this.handleFileUpload.bind(this);
    }

    handleFileUpload(fileName, blobName) {

        debugger;
    }

    render() {

        return (
            <Gallery uploader={uploader} />
        )
    }
}

function mapStateToProps(state, ownProps) {
    return {

    }
}

function mapDispatchToProps(dispatch, ownProps) {
    return {
        actions: bindActionCreators(myActions, dispatch)
    };
}

export default connect(mapStateToProps, mapDispatchToProps)(FileUploader)

Answer 1

我提出了以下有效的方法。我不确定这是最好的方式还是更优雅的方法。我不接受我的回答是正确的，让大家发表评论和投票。

import React, { Component } from 'react';
import { connect } from 'react-redux';
import { bindActionCreators } from 'redux';
import FineUploaderAzure from 'fine-uploader-wrappers/azure'

// Components
import Gallery from './gallery/index';

// Actions
import * as myActions from '../myActions';

// Instantiate FineUploader
const uploader = new FineUploaderAzure({
    options: {
        cors: {
            expected: true,
            sendCredentials: false
        },
        signature: {
            endpoint: 'http://localhost:123/getsas'
        },
        request: {
            endpoint: 'https://myaccount.blob.core.windows.net/my-container'
        }
    }
})

class FileUploader extends Component {

    constructor(props) {

        super(props);
        this.handleFileUpload = this.handleFileUpload.bind(this);
    }

    componentDidMount() {

       uploader.on('complete', (id, name, responseJSON, xhr) => {

            const originalName = uploader.methods.getName(id);
            const blobName = uploader.methods.getBlobName(id);

            this.handleFileUpload(originalName, blobName);
       }
    }

    handleFileUpload(fileName, blobName) {

        // Received fileName and blobName. We can call our actions creators here.
        this.props.actions.someAction(fileName, blobName);
    }

    render() {

        return (
            <Gallery uploader={uploader} />
        )
    }
}

function mapStateToProps(state, ownProps) {
    return {

    }
}

function mapDispatchToProps(dispatch, ownProps) {
    return {
        actions: bindActionCreators(myActions, dispatch)
    };
}

export default connect(mapStateToProps, mapDispatchToProps)(FileUploader)