在 javascript 脚本 index.html 公共文件夹中读取类 react js

Question

我需要知道如何将 index.html 公共文件夹文件中的 javscript 脚本嵌入到反应组件中。 我已经在使用这种方法，但类仍未定义。

componentDidMount () {
    this._loadScript('/library/es6-shim.js', false)
    this._loadScript('/library/fingerprint.sdk.min.js', true)
    this._loadScript('/library/websdk.client.bundle.min.js', false)
    var script = document.createElement('script')
    script.async = true
    script.innerHTML = "this.sdk = new Fingerprint.WebApi;"
    document.head.appendChild(script)
  }

  _loadScript = (src, type) => {
    var tag = document.createElement('script');
    tag.async = true;
    tag.src = src;
    document.head.appendChild(tag)
    // tag.onload = () => this.scriptLoaded()

    console.log('headers', document.head)
  }

我需要在我的组件中读取新的 Fingerprint.WebApi 实例。

Answer 1

您应该加载所有三个库，然后您应该可以访问全局公开的Fingerprint类。

componentDidMount() {
  Promise.all([
      this._loadScript('/library/es6-shim.js'),
      this._loadScript('/library/fingerprint.sdk.min.js'),
      this._loadScript('/library/websdk.client.bundle.min.js')
  ])).then(() => {
    // Fingerprint should be available on the window.
    console.log(window.Fingerprint);
    const sdk = new window.Fingerprint.WebApi();
  });
}
_loadScript = (src) => {
  return new Promise((resolve, reject) => {
    const script = document.createElement('script');
    script.setAttribute('type', 'text/javascript');
    script.setAttribute('async', 'true');
    script.setAttribute('src', url);
    script.onload = resolve;
    script.onerror = reject;
    document.head.appendChild(script);
  });
}