如何在 react.js 中包含带有“new Class({})”init 的 <script>？

问题描述

我有一个类似的脚本：

 <div id="widget"></div>
          <script
            type="text/javascript"
            src="https://widget.io/w.js"
          ></script>
          <script type="text/javascript">
              new Widget({
                width: 768,height: 525,containerId: "widget",partner_id: "default",})
          </script>

我需要在 React 组件中触发。

我已经使用他们的示例看到了与此相关的其他问题及其工作 - 除了 new Widget({}) 参数。

React 说 Widget 没有定义，因为它不是从任何地方导入的。

我使用 react 头盔来添加脚本标签，所以我的 render() 函数如下所示：

  render() {
    return (
      <div id="wert-widget">
        <Helmet>
 <div id="widget"></div>
          <script
            type="text/javascript"
            src="https://widget.io/w.js"
          ></script>
          <script type="text/javascript">
             {
                new Widget({
                width: 768,})
              }
          </script>
        </Helmet>
      </div>
    );
  }

但是 react 抛出一个错误，说 Widget 没有定义。

在 componentDidMount 函数中使用 setInnerHTML 也不起作用，因为它只是将新的 Widget 对象设置为字符串而不初始化小部件。

你会如何反应？

直接将它添加到 HTML index.html 没有帮助，因为当用户单击按钮时，我们只需要在一个组件上使用这个小部件。

解决方法

componentDidMount() {
  const script = document.createElement("script");
  script.src = "/static/libs/your_script.js";
  script.async = true;
  script.onload = () => this.scriptLoaded();

  element.appendChild(script);
}