这是我需要从外部库中获得的特定上传功能。
我想要实现的是：如果我单击由我的 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 设置不正确。我的方式不好吗？我怎样才能实现它？