javascript - ReactJS - 从外部库打开上传对话框

问题描述

这是我需要来自外部库的特定上传功能。

我想要实现的是：如果我单击由我的 ReactJS 应用程序呈现的按钮，则打开此外部上传对话框。

我想到了几个想法：

解决方案：如果我点击我的 ReactJS 按钮，则在“BS_WIDGET_INITIATOR”元素上执行合成点击事件（试过了，没用）
解决方案：使用 ReactJS 克隆该元素并渲染它（丑陋）
解决方案：在 ReactJS 中构建等效的 HTML，然后执行脚本

我从解决方案 3 开始。

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

<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 方法：

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 设置不正确。我的方法不好吗？我怎样才能实现它？

标签： javascriptreactjsdom

javascript - ReactJS - 从外部库打开上传对话框

问题描述

解决方案

推荐阅读