Javascript 如何将脚本添加到React组件并用作构造函数

我正在尝试将外部javascript（）加载到我的React.js组件中

当前代码如下所示：

let aScript = document.createElement('script');
aScript.type = 'text/javascript';
aScript.src = "CCapture.min.js";
document.head.appendChild(aScript);

此代码正确地将脚本附加到页面（选中HTML）。 但是现在我想知道如何在构造函数中使用脚本的内容。具体来说，根据文档，它看起来像这样

var capturer = new CCapture({
    framerate: 60,
    verbose: true
});

我得到的错误是说CCapture没有定义。我是不是遗漏了什么？不知道如何从库本身提取

我添加了一个函数，以确保在函数本身按照此指令运行之前加载它

---

我也没有使用npm包，因为它不适用于“webm”格式。在纠正npm包时寻找绷带

最可能的原因是，在您拨打电话之前，浏览器尚未加载和评估脚本。以下是对该答案中发生的情况的极好（且详细）描述：

根据我的经验，该答案中的最后一条建议通常是实现起来最轻松的：利用JQuery的

getScript

函数。它为您处理所有位的布线：

$.getScript("CCapture.min.js", function () {
    const capturer = new CCapture({
        framerate: 60,
        verbose: true
    });
});

---

首先，应该异步加载脚本。例如，您可以使用以下要点：。 此

loadScript

函数返回一个承诺，您可以使用该承诺等待库加载。 其次，您不应该将代码放在构造函数中，而应该像这样放在

componentDidMount

中

componentDidMount () {
    loadScript('CCapture.min.js')
      .then(() => {
        var capturer = new CCapture({
          framerate: 60,
          verbose: true
        });
      })
      // you can even handle the loading error for your script
      .catch((error) => {
        console.log('Error when loading CCapture.min.js: ', error);
      });
}

在cae中，您需要它，也可以在组件状态中保存

capturer

实例（使用

this.setState（{capturer}）

），或者直接在组件的实例对象中保存，如

this.capturer=capturer