如何从类外部的fineuploader const回调访问我的react组件props？

Question

我正在尝试在react-fine-uploader完成文件上传并触发回调后访问react组件的props。 但是，上载器不在组件之外，我似乎无法从回调函数访问组件的属性。

 import React from 'react'; // other imports const uploader = new FineUploaderTraditional({ options: { request: { endpoint: '/upload', }, callbacks: { onAllComplete: function(id, fileName, response) { console.log("Fineuploader: onAllComplete") // trying to access component props here } } } }) class myReactComponent extends React.Component { } export default myReactComponent 

Answer 1

尝试将其放入组件中：

import React from 'react';
// other imports
class myReactComponent extends React.Component {
   constructor(props) {
      super(props);
      const uploader = new FineUploaderTraditional({
         options: {
            request: {
            endpoint: '/upload',
            },
            callbacks: {
               onAllComplete: function(id, fileName, response) {
               console.log("Fineuploader: onAllComplete")
               // you should be able to access props here
               }
            }
         }
      })
   }
 }

 export default myReactComponent

您也可以将其放在render中，而不是在构造函数中：

class myReactComponent extends React.Component {
   render() {
      const uploader = new FineUploaderTraditional({
         options: {
            request: {
            endpoint: '/upload',
            },
            callbacks: {
               onAllComplete: function(id, fileName, response) {
               console.log("Fineuploader: onAllComplete")
               // you should be able to access this.props here
               }
            }
         }
      })
      ....
      return <>
    }
 }

Answer 2

经过更多的挖掘之后，我发现我可以使用以下命令重新注册组件内部的回调处理程序：

  uploader.on('onAllComplete', (id, name, response) => { // }) 

所以const仍然在类之外，但是我可以在内部访问回调。