经过大量的研发，我终于找到了我的解决方案。
我已使用npm postscribe在react组件中加载脚本

postscribe('#mydiv', '<script language="javascript" src="http://tickettransaction.com/?bid='+bid+'&sitenumber='+site+'&tid=event_dropdown"></script>')

一个使用函数组件的2021 TypeScript示例，该函数组件与NextJS配合使用

• （确保代码仅在客户端运行）*

declare global {
  interface Window {
    hbspt: any
  }
}

export default function Contact() {
  useEffect(() => {
    if (window && document) {
      const script = document.createElement('script')
      const body = document.getElementsByTagName('body')[0]
      script.src = '//js.hsforms.net/forms/v2.js'
      body.appendChild(script)
      script.addEventListener('load', () => {
        window.hbspt.forms.create({
          // this example embeds a Hubspot form into a React app but you can tweak it for your use case
          // any code inside this 'load' listener will run after the script is appended to the page and loaded in the client
        })
      })
    }
  }, [])

  return <div id="hbspt-form" className="p-5"></div>
}

下面的方法对我来说是有效的。试一下，希望它对你也有效。基本上，你可以创建一个脚本标签并将其附加到body标签上。就像这样--

var tag = document.createElement('script');
tag.async = true;
tag.src = 'THE PATH TO THE JS FILE OR A CDN LINK';
var body = document.getElementsByTagName('body')[0];
body.appendChild(tag);

您可以在一个生命周期钩子上使用它来做出如下React。

componentDidMount() {
    var loadScript = function (src) {
      var tag = document.createElement('script');
      tag.async = false;
      tag.src = src;
      var body = document.getElementsByTagName('body')[0];
      body.appendChild(tag);
    }

    loadScript('PATH TO THE JS FILE OR CDN URL');
  }

我推荐使用React Helmet，我已经在几个Create-React-Apps上使用过它，它允许你编写实际的脚本标记和普通的JS。
它使这个过程更加顺畅。所以对你来说，一旦你导入了React Helm ，它就会是这样的。

<script language="javascript" src='http://tickettransaction.com/?bid='+ bid + '&sitenumber='+ site +'&tid=event_dropdown' ></ script>

这是最简单的加载脚本标签的方法
https://www.npmjs.com/package/react-script-tag

import ScriptTag from 'react-script-tag';

const Demo = props => (
<ScriptTag src="/path/to/resource.js" />
);

还有其他方法可以做到这一点：
https://medium.com/better-programming/4-ways-of-adding-external-js-files-in-reactjs-823f85de3668

2022年更新

使用https://usehooks-ts.com/react-hook/use-script。这也会传回status，并允许removeOnUnmount之类的道具。

更新2022年的 * 基于类 * 以及 * 功能 * 组件。

您可以创建一个函数，如下所示，然后在componentDidMount中使用它：

function loadScript(url, callback){

    let script = document.createElement("script")
    script.type = "text/javascript";

    if (script.readyState){  //IE
        script.onreadystatechange = function(){
            if (script.readyState == "loaded" ||
                    script.readyState == "complete"){
                script.onreadystatechange = null;
                callback();
            }
        };
    } else {  //Others
        script.onload = function(){
            callback();
        };
    }

    script.src = url;
    document.getElementsByTagName("head")[0].appendChild(script);
}

// For class based components
componentDidMount() {
    loadScript("scriptUrl", callback());
}

// For functional components
useEffect(() => {
    loadScript("scriptUrl", callback());
}, [])

来源：Create React App添加第三方js库