在React中的特定组件（路由）上加载脚本

Question

是否有可能仅在特定的React组件中运行html脚本，而不是直接在index.html中运行。该脚本加载了第三方条形码扫描仪，该扫描仪仅在一个组件中使用，因此，我希望避免为每个组件加载它，因为这会使整个应用程序变慢。

npm模块可以在这里找到：https://www.npmjs.com/package/dynamsoft-javascript-barcode，但是没有有关如何导入它的文档，仅包括如下内容：

<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/dbr.js" data-productKeys="LICENSE-KEY"></script> 
<script>
  let barcodeScanner = null;
        Dynamsoft.BarcodeScanner.createInstance({
            onFrameRead: results => {console.log(results);},
            onUnduplicatedRead: (txt, result) => {alert(txt);}
        }).then(scanner => {
            barcodeScanner = scanner;
            barcodeScanner.show();
        });
</script> 

Answer 1

仅需要使用npm或yarn安装软件包。

[npm创建一个名称为node_modules的目录。

在您需要运行该库的组件中，执行以下操作：

import { function_name } from 'module_name';

OR

import '/modules/my-module.js';

检查此reference

Answer 2

我没有尝试过这段代码，但是我已经完成了一些这样的代码。您可以像这样添加脚本标签：

   loadScript() {
       let script = document.createElement("script");
       script.src = "https://cdn.jsdelivr.net/npm/[email protected]/dist/dbr.js";
       script.data-productKeys="LICENSE-KEY";
       script.type = "text/javascript";
       document.head.append(script);
   }
   componentWillMount() {
      this.loadScript();   
  }

这将在head标签中添加脚本标签，然后，您可以在组件中运行代码。