在React中加载特定组件(路由)上的脚本

Question

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

npm模块可以在这里找到：https://www.npmjs.com/package/dynamsoft-javascript-barcode，但是没有关于如何导入它的文档，只是像这样包含了它：

<script src="https://cdn.jsdelivr.net/npm/dynamsoft-javascript-barcode@7.2.2-v2/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

下面是Dynamsoft GitHub存储库提供的React示例：https://github.com/dynamsoft-dbr/javascript-barcode/tree/master/example/web/react

您可以查看Dynamsoft.js和HelloWorld.js，了解如何导入和使用该模块：

import Dynamsoft from "dynamsoft-javascript-barcode";
Dynamsoft.BarcodeReader.engineResourcePath = "https://cdn.jsdelivr.net/npm/dynamsoft-javascript-barcode@7.3.0-v1/dist/";
// Please visit https://www.dynamsoft.com/CustomerPortal/Portal/TrialLicense.aspx to get a trial license
Dynamsoft.BarcodeReader.productKeys = "PRODUCT-KEYS";
// Dynamsoft.BarcodeReader._bUseFullFeature = true; // Control of loading min wasm or full wasm.
export default Dynamsoft;

import Dynamsoft from "../Dynamsoft";
import React from 'react';

class HelloWorld extends React.Component {
    ...
    let reader = this.reader = this.reader || await Dynamsoft.BarcodeReader.createInstance();
    ...
}

注意：此示例使用7.3.0-v1。7.2.2-v2不支持此用法。

Answer 2

我还没有尝试过这段代码，但我已经做了一些代码，比如this.You可以像这样添加脚本标记：

class YourComponent extends React.Component {
  loadScript() {
    let script = document.createElement("script");
    script.src = "https://cdn.jsdelivr.net/npm/dynamsoft-javascript-barcode@7.2.2-v2/dist/dbr.js";
    script.setAttribute("data-productKeys","LICENSE-KEY");
    script.type = "text/javascript";
    document.head.append(script);
  }
  componentWillMount() {
    if(!YourComponent.bScriptLoaded){
      this.loadScript();  
      YourComponent.bScriptLoaded = true; 
    }
  }
}

这将在头标记and.And中添加脚本标记，之后您可以在组件中运行代码。