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

我有以下代码，在我的React组件中，我使用了第三方组件--

FineUploader

上传文件时，它调用其

onComplete

函数。从这里，我试图呼叫我的动作创建者来处理上传后的过程，但我无法从那里访问我的

道具

或

动作

，因为这些都在我的组件之外

到那时为止，一切都在运转。我可以从我的组件中调用

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)

import React，{Component}来自'React'；
从'react redux'导入{connect}；
从“redux”导入{bindActionCreators}；
从“fine uploader wrappers/azure”导入FineUploaderAzure
//组成部分
从“./Gallery/index”导入库；
//行动
将*作为myActions从“../myActions”导入；
//实例化FineUploader
const uploader=新的FineUploaderAzure({
选项：{
cors：{
预期:对,，
发送凭据：false
},
签名：{
端点：'http://localhost:123/getsas'
},
请求：{
端点：'https://myaccount.blob.core.windows.net/my-container'
},
回调：{
onComplete：函数（id、name、responseJSON、xhr）{
const fileName=uploader.methods.getName（id）；
const blobName=uploader.methods.getBlobName（id）；
//我现在需要打电话给我的动作创建者来处理后端的事情
//或者我可以在我的组件中调用handleFileUpload函数。
//如何从这里访问我的action creator或handleFileUpload功能？
}
}
}
})
类FileUploader扩展组件{
建造师（道具）{
超级（道具）；
this.handleFileUpload=this.handleFileUpload.bind（this）；
}
handleFileUpload（文件名，blobName）{
调试器；
}
render（）{
返回(
)
}
}
函数mapStateToProps（状态，ownProps）{
返回{
}
}
功能图DispatchToprops（分派，ownProps）{
返回{
操作：bindActionCreators（myActions，dispatch）
};
}
导出默认连接（mapStateToProps、mapDispatchToProps）（文件上载程序）

我想出了以下有效的方法。我不确定这是最好的方法还是有更优雅的方法。我不会接受我的正确答案，也不会让每个人都发表自己的评论和投票

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)

import React，{Component}来自'React'；
从'react redux'导入{connect}；
从“redux”导入{bindActionCreators}；
从“fine uploader wrappers/azure”导入FineUploaderAzure
//组成部分
从“./Gallery/index”导入库；
//行动
将*作为myActions从“../myActions”导入；
//实例化FineUploader
const uploader=新的FineUploaderAzure({
选项：{
cors：{
预期:对,，
发送凭据：false
},
签名：{
端点：'http://localhost:123/getsas'
},
请求：{
端点：'https://myaccount.blob.core.windows.net/my-container'
}
}
})
类FileUploader扩展组件{
建造师（道具）{
超级（道具）；
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（原始名称、blobName）；
}
}
handleFileUpload（文件名，blobName）{
//收到文件名和blobName。我们可以在此处调用我们的操作创建者。
this.props.actions.someAction（文件名，blobName）；
}
render（）{
返回(
)
}
}
函数mapStateToProps（状态，ownProps）{
返回{
}
}
功能图DispatchToprops（分派，ownProps）{
返回{
操作：bindActionCreators（myActions，dispatch）
};
}
导出默认连接（mapStateToProps、mapDispatchToProps）（文件上载程序）

这帮我解决了一个类似的问题，谢谢！