Загрузка сценариев для указанного c компонента (маршрута) в React - PullRequest
Новая
       5

Загрузка сценариев для указанного c компонента (маршрута) в React

1 голос
/ 07 января 2020

Возможно ли запускать html скриптов в заданном c Реагировать только на компонент, а не прямо в индексе. 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>

Ответы [ 2 ]

1 голос
/ 10 февраля 2020

Вот пример React, предоставляемый хранилищем Dynamsoft GitHub: 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 не поддерживает это использование.

0 голосов
/ 07 января 2020

Я не пробовал этот код, но я сделал некоторый код, подобный этому. Вы можете добавить тег скрипта следующим образом: 

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

Это добавит тег скрипта в заголовок тега и. И после этого вы может запустить ваш код в компоненте.

...