ReactJS-从外部库打开上传对话框 [英] ReactJS - open upload dialog from external library

问题描述

这是我需要从外部库中获取的特定上载功能。

It is a specific upload functionality that I need from an external library.

我想要实现的是：如果单击一个按钮，请打开此外部上载对话框是由我的ReactJS应用渲染的。

What I want to achieve is: open this external upload dialog if I click a button that is rendered by my ReactJS app.

我想到了一些想法：

1. 解决方案：如果我单击ReactJS按钮，则在 BS_WIDGET_INITIATOR元素上执行综合点击事件（尝试那样，不起作用）


2. 解决方案：使用ReactJS克隆该元素并进行渲染它（丑陋的）


3. 解决方案：在ReactJS中构建等效的HTML，然后执行脚本

我从解决方案3开始。

这是外部脚本的原始集成：

Here is the original integration of the external script:

<script type="text/javascript" src="https://blabla.de/js/widget.js">
  BS.CONFIG = {
    "token": "546bc22e-d747-421f-b4bf-b19b5129816b",
    "hostname": "https://blabla.de/match",
    "redirectOnError": "ERROR_PAGE",
    "postOriginalDocument": true,
    "images": {
      "dropbox": "https://www.blabla.de/dropbox.svg",
      "googledrive": "https://www.blabla.de/googledrive.svg",
      "onedrive": "https://www.blabla.de/onedrive.svg",
      "cv": "https://www.blabla.de/cv.svg"
    },
    "postProfileUrl": "LANDING_PAGE",
    "gapiClientId": "GOOGLE_API_WEBCLIENT_ID",
    "oneDriveApiKey": "ONEDRIVE_APP_KEY"
  }
</script>

<button id="BS_WIDGET_INITIATOR">Apply now</button>
<div id="BS_WIDGET_CONTAINER" style="display:none">
  Apply with
  <hr/>
  <div class="BS_WIDGET" rel="dropbox"></div>
  <div class="BS_WIDGET" rel="googledrive"></div>
  <div class="BS_WIDGET" rel="onedrive"></div>
  <hr id="BS_WIDGET_HYBRID_SEPARATOR" />
  <div class="BS_WIDGET" rel="cv"></div>
</div>

<style type="text/css">
  #BS_WIDGET_CONTAINER {
    background-color: #fff;
    box-sizing: content-box;
    border: 1px solid #ccc;
    border-radius: 5px;
    width: 220px;
    text-align: center;
    color: #666;
    font-family: sans-serif;
    font-size: 12px;
  }
  
  .BS_WIDGET {
    display: inline-block;
    padding: 5px;
  }
  
  .BS_WIDGET[rel=cv],
  .BS_WIDGET[rel=form] {
    display: block;
    text-align: left;
  }
  
  hr {
    border: solid #ccc;
    border-width: 1px 0 0 0;
    margin: 5px 0;
  }
  
  .BS_WIDGET:hover {
    background-color: #ddd;
  }
  
  .BS_WIDGET img[src$=".svg"] {
    height: 32px;
    width: 32px;
  }
  
  .BS_WIDGET[rel=cv] img[src$=".svg"],
  .BS_WIDGET[rel=form] img[src$=".svg"] {
    width: auto;
  }
</style>

<script type="text/javascript" src="https://www.dropbox.com/static/api/2/dropins.js" id="dropboxjs" data-app-key="DROP-INS_API_KEY"></script>
<script type="text/javascript" src="https://apis.google.com/js/client.js?onload=onGapiLoad"></script>
<script type="text/javascript" src="https://www.google.com/jsapi"></script>
<script type="text/javascript">
  google.load('picker', '1');
</script>
<script type="text/javascript" src="https://js.live.net/v7.0/OneDrive.js" id="onedrive-js"></script>

这是我的ReactJS方法：

Here is my ReactJS approach:

import { useEffect } from 'react';

const useScript = (url) => {
  useEffect(() => {
    const script = document.createElement('script');
    script.async = true;
    script.src = url;
    window.BS = {
      ...window.BS,
      CONFIG: {
            token: "546bc22e-d747-421f-b4bf-b19b5129816b",
            hostname: "https://blabla.de/match",
            redirectOnError: "ERROR_PAGE",
            postOriginalDocument: true,
            images: {
              dropbox: "https://www.blabla.de/dropbox.svg",
              googledrive: "https://www.blabla.de/googledrive.svg",
              onedrive: "https://www.blabla.de/onedrive.svg",
              cv: "https://www.blabla.de/cv.svg"
            },
            postProfileUrl: "LANDING_PAGE",
            gapiClientId: "GOOGLE_API_WEBCLIENT_ID",
            oneDriveApiKey: "ONEDRIVE_APP_KEY"
          }
      };
    document.body.appendChild(script);

    return () => {
      document.body.removeChild(script);
    };
  }, [url]);
};

export default useScript;

import React from 'react';
import { Button } from 'antd';
import getTranslation from '../../utils/getTranslation';

import useScript from '../../utils/useScript';

const t = getTranslation;
const UploadButton = ({ uris, disabled }) => {
  if (uris && uris.BS) {
    useScript(uris.BS);
  }
  return (
    <>
      <div id="BS_WIDGET_CONTAINER" style={{ display: 'none' }}>
        Apply with
        <hr />
        <div className="BS_WIDGET" rel="dropbox" />
        <div className="BS_WIDGET" rel="googledrive" />
        <div className="BS_WIDGET" rel="onedrive" />
        <hr id="BS_WIDGET_HYBRID_SEPARATOR" />
        <div className="BS_WIDGET" rel="cv" />
      </div>
      <Button id="BS_WIDGET_INITIATOR" disabled={disabled} type="primary">{t('upload-cv')}</Button>
    </>
  );
};
export default UploadButton;

但是，似乎BS.CONFIG的设置不正确。我的方式不好吗？我该如何实现？

But it seems, that the BS.CONFIG is not set properly. Is my way bad ? How can I achieve it ?

推荐答案

我同意第三个解决方案是最好的方法。至于脚本的执行，您应该只需将确切的脚本标记放入 index.html 。

I agree the third solution is the best approach. As for the script execution, you should be able to just put that exact script tag in your index.html.

这篇关于ReactJS-从外部库打开上传对话框的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！