Question

我想重用Cloudinary上载窗口小部件的单个实例来从我的React应用程序中的多个位置上载和检索上载的媒体信息吗？

我可以将不同的resultCallbacks传递给Cloudinary上传小部件的同一实例吗？

我正在构建一个React应用，其中不同的文本块与不同的图像相关联。我使用Cloudinary上传小部件来处理上传，然后在相应文本块旁边显示结果。

当前，我为每个文本块生成一个Cloudinary小部件的新实例，但是我意识到这是资源密集型的。

尝试解决此问题，我为上载小部件创建了一个单例，并在其中传递了我要运行的回调函数（我想为每个文本块在Cloudinary的上载响应中附加一个标识符）。

现在的问题是，一旦创建，我就无法动态更改单例的回调。

是否有办法使实例繁多或将动态resultCallback函数传递给单个实例？

const widget = {
  window: null,
  type: null,
};

/**
 * @class UploadWidget
 */
export default class UploadWidget {
  /**
   *
   * @param {object} options widget options
   * @param {string} options.type
   * @returns {undefined}
   */
  constructor({ cb, type }) {
    if (type !== widget.type) {
      widget.window = window.cloudinary.createUploadWidget(
        {
          cloudName: process.env.CLOUD_NAME,
          uploadPreset: process.env.UPLOAD_PRESET,
          styles: {
            palette: {
              window: '#FFFFFF',
              windowBorder: '#97AB35',
              tabIcon: '#4B9960',
              menuIcons: '#5A616A',
              textDark: '#000000',
              textLight: '#FFFFFF',
              link: '#FFCC53',
              action: '#4B9960',
              inactiveTabIcon: '#6D6D6C',
              error: '#F44235',
              inProgress: '#0078FF',
              complete: '#4B9960',
              sourceBg: '#FBFBFA',
            },
            fonts: {
              default: null,
              "'Fira Sans', sans-serif": {
                url: 'https://fonts.googleapis.com/css?family=Fira+Sans',
                active: true,
              },
            },
          },
        },
        cb
      );
      widget.type = type;
    }

    return widget.window;
  }
}

cb是具有以下定义的函数

function(error, result)

error为null（如果成功）或错误消息（如果失败），而result是一个详细描述触发事件的JSON对象。

Answer 1

为什么不进行回调包装？这样，您可以更改存储适当回调的变量？如您所见，我有this.callbackHandler作为uploadwidget的回调，还有一个名为trueCallback的变量，用于存储预期的回调函数。 this.callbackHandler只是将其参数传递给实际的回调，该回调是可以像这样轻松定义的变量：

//Redefining true callback
let uploadWidget = new UploadWidget(//variables here);
uploadWidget.trueCallback = someNewCallbackHere;

/**
 * @class UploadWidget
 */
export default class UploadWidget {
  /**
   *
   * @param {object} options widget options
   * @param {string} options.type
   * @returns {undefined}
   */
  constructor({ cb, type }) {
    this.trueCallback = cb;
    if (type !== widget.type) {
      widget.window = window.cloudinary.createUploadWidget(
        {
          cloudName: process.env.CLOUD_NAME,
          uploadPreset: process.env.UPLOAD_PRESET,
          styles: {
            palette: {
              window: '#FFFFFF',
              windowBorder: '#97AB35',
              tabIcon: '#4B9960',
              menuIcons: '#5A616A',
              textDark: '#000000',
              textLight: '#FFFFFF',
              link: '#FFCC53',
              action: '#4B9960',
              inactiveTabIcon: '#6D6D6C',
              error: '#F44235',
              inProgress: '#0078FF',
              complete: '#4B9960',
              sourceBg: '#FBFBFA',
            },
            fonts: {
              default: null,
              "'Fira Sans', sans-serif": {
                url: 'https://fonts.googleapis.com/css?family=Fira+Sans',
                active: true,
              },
            },
          },
        },
        this.callbackHandler
      );
      widget.type = type;
    }

    return widget.window;
  }

  callbackHandler = (err, res) => {
    this.trueCallback(err, res);
  }
}

如何使用多个resultCallback函数创建单个cloudinary实例

1 个答案: