Question

我尝试将外部javascript（https://github.com/spite/ccapture.js）加载到我的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未定义。我在这里错过了什么吗？不知道如何从图书馆本身拉出来。

我已添加了一个函数，以确保在函数本身按照此指令运行之前加载https://stackoverflow.com/a/42848407/8497330。

我还不使用npm包，因为它不适用于＆＃39; webm＆＃39;格式。在npm包被纠正的同时寻找一个bandaid。

Answer 1

最可能的原因是，在您拨打电话之前，浏览器尚未加载和评估该脚本。这是对本答案中发生的事情的极好（详细）描述：https://stackoverflow.com/a/14786759/105518

根据我的经验，该答案中的最后一条建议通常是最难实现的：利用JQuery的getScript功能。它处理所有位的连接：

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

Answer 2

首先，您应该异步加载脚本。例如，您可以使用此要点：loadScript。此loadScript函数返回一个可用于等待库加载的promise。其次，你不应该把你的代码放在构造函数中，而应该放在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;

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

2 个答案: