Question

我有一个用于Widget的脚本，原始集成中的脚本如下：

<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>

我要实现的目标：在ReactJS中构建等效项。

我尝试过：

import {
  useEffect
} from 'react';

const useScript = (url) => {
  useEffect(() => {
    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',
    };
    const script = document.createElement('script');
    script.async = false;
    script.src = url;
    document.body.appendChild(script);

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

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;

但是我收到一个错误消息，未配置该小部件。

我在做什么错了？

使用配置对象来响应脚本调用

0 个答案: