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

【问题标题】：Loading Scripts on specific component (Route) in React在 React 中的特定组件（路由）上加载脚本
【发布时间】：2020-02-10 15:51:59
【问题描述】：

是否可以仅在特定的 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>

【问题讨论】：

标签： javascript html reactjs cdn

【解决方案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 不支持这种用法。

【讨论】：

【解决方案2】：

我没有尝试过这段代码，但我做了一些这样的代码。你可以像这样添加脚本标签：

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; 
    }
  }
}

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

【讨论】：