Question

我试图在react-fine-uploader完成上传文件并触发回调后访问react组件的道具。但是，上传器在组件之外，我似乎无法从回调函数访问组件的道具。

＆＃13;

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

＆＃13;

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

你也可以把它放在渲染中而不是构造函数中：

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仍然在类之外，但我可以访问里面的回调。

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

2 个答案: