Question

我正在尝试在React中加载脚本而不是在HTML文件中绑定它。我近在咫尺并不能使它发挥作用。

我的html文件：

<!DOCTYPE html>
<html lang="en">
    <head>

        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
        <meta name="google-signin-client_id" content= "817677528939-dss5sreclldv1inb26tb3tueac98d24r.apps.googleusercontent.com">

        <meta name="google-signin-scope" content="profile email">
        <script src="https://apis.google.com/js/platform.js"></script>
        <title>React App</title>
    </head>
    <body>

        <div id="root"></div>
    </body>
</html>

这很有效。但是我试图让它在HTML文件中没有它的情况下工作。

loadScript.js

const loadScript = (url) => new Promise((resolve, reject) => {
  let ready = false;
  if (!document) {
    reject(new Error('Document was not defined'));
  }
  const tag = document.getElementsByTagName('script')[0];
  const script = document.createElement('script');

  script.type = 'text/javascript';
  script.src = url;
  script.async = true;
  script.onreadystatechange = () => {
    if (!ready && (!this.readyState || this.readyState === 'complete')) {
      ready = true;
      resolve(script);
    }
  };
  script.onload = script.onreadystatechange;

  script.onerror = (msg) => {
    console.log(msg);
    reject(new Error('Error loading script.'));
  };

  script.onabort = (msg) => {
    console.log(msg);
    reject(new Error('Script loading aboirted.'));
  };

  if (tag.parentNode != null) {
    tag.parentNode.insertBefore(script, tag);
  }
});


export default loadScript;

然后在我的App.js

loadScript() {
// Load the google maps api script when the component is mounted.

    loadScript("https://apis.google.com/js/platform.js")
        .then((script) => {
        // Grab the script object in case it is ever needed.
            this.script = script;
            this.setState({ apiLoaded: true });
        })
        .catch((err: Error) => {
            console.error(err.message);
        });
}


componentDidMount() {
        console.log('component did mount')

        this.loadScript()

        ///how do I make this gapi below reference gapi inside this.script?
        gapi.load('auth2', () => {
            var auth2 = gapi.auth2.init({
                client_id: '817677528939-dss5sreclldv1inb26tb3tueac98d24r.apps.googleusercontent.com',
                scope: 'profile email',

            })
            .then((auth2) => {
                if (auth2.isSignedIn.get()) {
                    this.setState({
                        redirect:true,
                        gapiLoaded:true
                    })
                } else {
                    console.log( "signed in: " + auth2.isSignedIn.get())
                    this.setState({
                        gapiLoaded: true
                    },
                    () => {console.log('state set')})    
                }

            });
        });
    }

打印gapi

{platform: {…}, _pl: true, additnow: {…}, backdrop: {…}, load: ƒ, …}

打印response

<script type="text/javascript" src="https://apis.google.com/js/platform.js" async="" gapi_processed="true"></script>

看起来它正在打印出元素。然后我如何访问其中的gapi？

Answer 1

我认为您希望在gapi可用时使用它。你可以改变代码。等到使用loadScript加载它。

App.js - 反应组件

loadScript(){
  loadScript("https://apis.google.com/js/platform.js")
    .then((script) => {
      /* setState stuff */
      this.gapiLoad(); // use gapi api, it is now available
    })
}

gapiLoad(){
  window.gapi.load('auth2', () => {
    /* your code */
  })
}

componentDidMount(){
  this.loadScript();
}

或者您也可以使用生命周期componentDidUpdate并测试apiLoaded为true且gapiLoad为false。然后使用gapi api。

加载脚本反应

1 个答案: